好程序员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事件

  });