您现在的位置是:首页 > 文章详情

javascript 练习题

日期:2019-11-13点击:371

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事件 }); 
原文链接:https://yq.aliyun.com/articles/727040
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章