深圳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.οnmοusemοve=function (e) {
my
(
"
i
m
"
)
.
s
t
y
l
e
.
l
e
f
t
=
e
v
t
.
g
e
t
P
a
g
e
X
(
e
)
+
"
p
x
"
;
m
y
("im").style.left=evt.getPageX(e)+"px"; 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事件
});