javascript 练习题
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事件 });
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Python练习:解题 - 两数相加(JS, TS, PY3版)
两数相加 题目描述 给出两个 非空 的链表用来表示两个非负的整数。其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字。 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和。 您可以假设除了数字 0 之外,这两个数都不会以 0 开头。 输入:(2 -> 4 -> 3) + (5 -> 6 -> 4)输出:7 -> 0 -> 8原因:342 + 465 = 807 解题思路 其实这题比较简单,无非是两个链表之间同层级的数字相加,唯一要注意的就是如果相加之后数字大于10,需要往下一级+1,当前级数是个位的那个数字。基本也是一个循环可以解决的。再注意处理下,如果一个链表长度长于另一个链表时的边界处理,其余就没啥了。 Python练习:解题 - 两数相加(JS, TS, PY3版)JS版 /** @param {ListNode} l1 @param {ListNode} l2 @return {ListNode}*/const addTwoNumbers = (l1, l2) => { let l3 =...
- 下一篇
javascript练习题-事件
前端javascript练习题-事件键盘控制div移动如果需要在页面中移动,要将元素脱离文档流(否则会影响页面布局) js实现代码: var odiv=document.getElementsByTagName("div")[0]; document.onkeydown=function(e){ var evt=e||event; var x=odiv.offsetLeft; //获取div的坐标值 var y=odiv.offsetTop; var code=evt.keyCode; //获取键盘码 switch (code){ //当按下方向键,执行对应的功能 case 38: odiv.style.left=x+"px"; odiv.style.top=y-10+"px"; break; case 40: odiv.style.left=x+"px"; odiv.style.top=y+10+"px"; break; case 37: odiv.style.left=x-10+"px"; odiv.style.top=y+"px"; break; case 39: odiv.st...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果