web前端教程分享前端 javascript 練習題，圖片跟著鼠標飛：
//圖片跟著鼠標飛,可以在任何的瀏覽器中實現(xiàn)
//window.event和事件參數(shù)對象e的兼容
//clientX和clientY單獨的使用的兼容代碼
//scrollLeft和scrollTop的兼容代碼
//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop
//把代碼封裝在一個函數(shù)
//把代碼放在一個對象中
var evt={
//window.event和事件參數(shù)對象e的兼容
getEvent:function (evt) {
return window.event||evt;
},
//可視區(qū)域的橫坐標的兼容代碼
getClientX:function (evt) {
return this.getEvent(evt).clientX;
},
//可視區(qū)域的縱坐標的兼容代碼
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實現(xiàn)代碼： 需要引入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});
});
//節(jié)流閥 ：按下的時候，觸發(fā)，如果沒彈起，不讓觸發(fā)下一次
//1. 定義一個flag
var flag = true;
//按下1-9這幾個數(shù)字鍵，能觸發(fā)對應的mouseenter事件
$(document).on("keydown", function (e) {
if(flag) {
flag = false;
//獲取到按下的鍵
var code = e.keyCode;
if(code >= 49 && code <= 57){
//觸發(fā)對應的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
}
});
$(document).on("keyup", function (e) {
flag = true;
//獲取到按下的鍵
var code = e.keyCode;
if(code >= 49 && code <= 57){
//觸發(fā)對應的li的mouseenter事件
$(".nav li").eq(code - 49).mouseleave();
}
});
//彈起的時候，觸發(fā)mouseleave事件
});
