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事件

    });