好程序员web前端教程分享前端 javascript 练习题

好程序员web前端教程分享前端 javascript 练习题，图片跟着鼠标飞：

//图片跟着鼠标飞,可以在任何的浏览器中实现

//window.event和事件参数对象e的兼容

//clientX和clientY单独的使用的兼容代码

//scrollLeft和scrollTop的兼容代码

//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop

//把代码封装在一个函数

//把代码放在一个对象中

var evt={

//window.event和事件参数对象e的兼容

getEvent:function (evt) {

return window.event||evt;

},

//可视区域的横坐标的兼容代码

getClientX:function (evt) {

return this.getEvent(evt).clientX;

},

//可视区域的纵坐标的兼容代码

getClientY:function (evt) {

return this.getEvent(evt).clientY;

},

//页面向左卷曲出去的横坐标

getScrollLeft:function () {

return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;

},

//页面向上卷曲出去的纵坐标

getScrollTop:function () {

return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;

},

//相对于页面的横坐标(pageX或者是clientX+scrollLeft)

getPageX:function (evt) {

return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();

},

//相对于页面的纵坐标(pageY或者是clientY+scrollTop)

getPageY:function (evt) {

return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();

}

};

//最终的代码

document.onmousemove=function (e) {

my$("im").style.left=evt.getPageX(e)+"px";

my$("im").style.top=evt.getPageY(e)+"px";

};

钢琴版导航条：
css样式：

* {

margin: 0;

padding: 0;

list-style: none;

}

.nav {

width: 900px;

height: 60px;

background-color: black;

margin: 0 auto;

}

.nav li {

width: 100px;

height: 60px;

/*border: 1px solid yellow;*/

float: left;

position: relative;

overflow: hidden;

}

.nav a {

position: absolute;

width: 100%;

height: 100%;

font-size: 24px;

color: blue;

text-align: center;

line-height: 60px;

text-decoration: none;

z-index: 2;

}

.nav span {

position: absolute;

width: 100%;

height: 100%;

background-color: yellow;

top: 60px;

}

jq实现代码： 需要引入jq文件

$(function () {

//给li注册鼠标进入事件,让li下面的span top：0 播放音乐

$(".nav li").mouseenter(function () {

$(this).children("span").stop().animate({top: 0});

//播放音乐

var idx = $(this).index();

$(".nav audio").get(idx).load();

$(".nav audio").get(idx).play();

}).mouseleave(function () {

$(this).children("span").stop().animate({top: 60});

});

//节流阀 ：按下的时候，触发，如果没弹起，不让触发下一次

//1. 定义一个flag

var flag = true;

//按下1-9这几个数字键，能触发对应的mouseenter事件

$(document).on("keydown", function (e) {

if(flag) {

flag = false;

//获取到按下的键

var code = e.keyCode;

if(code >= 49 && code <= 57){

//触发对应的li的mouseenter事件

$(".nav li").eq(code - 49).mouseenter();

}

}

});

$(document).on("keyup", function (e) {

flag = true;

//获取到按下的键

var code = e.keyCode;

if(code >= 49 && code <= 57){

//触发对应的li的mouseenter事件

$(".nav li").eq(code - 49).mouseleave();

}

});

//弹起的时候，触发mouseleave事件

});