模仿阿里云的（鼠标经过事件）

拼搏现实的明天。 2022-05-18 02:37 116阅读 0赞

<!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>