<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
height:150px;
width:150px;
margin:100px auto;
border:1px solid #000;
float:left;
margin:0 20px;
}
div:nth-of-type(1){
background:url(images/1.jpg) no-repeat;
}
div:nth-of-type(2){
background:url(images/2.jpg) no-repeat;
}
div:nth-of-type(3){
background:url(images/3.jpg) no-repeat;
}
div:nth-of-type(4){
background:url(images/4.jpg) no-repeat;
}
div:nth-of-type(5){
background:url(images/5.jpg) no-repeat;
}
div:nth-of-type(6){
background:url(images/6.jpg) no-repeat;
}
</style>
<script>
/*原生js通过定时器实现图片位置切换得到“动图”*/
window.onload = function(){
var aDiv = document.getElementsByTagName('div');
function aaa(obj){
obj.onmouseover = function(){
clearInterval(this.timer)
this.num =0;
var This = this;
this.timer= setInterval(function(){
if(This.num==59){
This.num=59
clearInterval(This.timer)
}else{
This.num++;
}
This.style.backgroundPosition = '0 -'+This.num*150+'px'
},30)
}
obj.onmouseout = function(){
clearInterval(this.timer)
var This = this;
this.timer= setInterval(function(){
if(This.num==0){
This.num=0
clearInterval(This.timer)
}else{
This.num--;
}
This.style.backgroundPosition = '0 -'+This.num*150+'px'
},30)
}
}
for(var i = 0;i<aDiv.length;i++){
aaa(aDiv[i])
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
