图片滑动效果 


<!doctype html>
<html>
<head>
  <meta charset='utf-8'>    
  <title>test</title>
<style>
*{margin:0;padding:0;}
#div1{
    margin: 20px;
    overflow: hidden;
    height: 300px;
    border: 1px solid;
    position: relative;
}
#div1 img{
    width: 400px;
    height: 300px;
    position: absolute; 
    border: 3px solid #fff;  
}

</style>
</head>
<body>

<div id="div1">
<img  src="京东/1.jpg" alt="">
<img  src="京东/2.jpg" alt="">
<img  src="京东/3.jpg" alt="">
<img  src="京东/4.jpg" alt="">

</div>



</body>
<script>


var oDiv=document.querySelector('#div1');
var OImg=document.getElementsByTagName('img');
var distance= 150;
var imgWidth=OImg[0].clientWidth;
var movedis=imgWidth-distance;
var timer=0;

oDiv.style.width=imgWidth+(OImg.length-1)*distance+'px';

//给每个图定位距离
function set() {
    for (var i = 1; i < OImg.length; i++) {
    OImg[i].style.left=imgWidth+(i-1)*distance+'px';
    }
}
set();

//鼠标移入
for(var i=1;i<OImg.length;i++){
//若无return，当页面加载至js时，for循环第一次，oImg[0].onmouseover=function(){...},此时{}里的代码未执行，i仍是i;
//一直到最后，for循环中的i=4，跳出循环，页面加载完成，随后鼠标移入任意img，触发事件，每一个oImg[i]绑定的function(){...}里i都是4。
//因此用return跳出，并以匿名函数执行，以参数赋值给i
            OImg[i].onmouseover=(function(i){
                return function(){
                    for(var j=1;j<OImg.length;j++){
                        if(j<=i){
                            moveTo(OImg[j],imgWidth+(j-1)*distance-movedis);
                        }else{
                            moveTo(OImg[j],imgWidth+(j-1)*distance);
                        }               
                    }           
                }   
            })(i)
        }
OImg[0].onmouseover=function(){
            for(var i=1;i<OImg.length;i++){
                moveTo(OImg[i],imgWidth+(i-1)*distance);
            }
        }

//移动算法
function moveTo(obj,aim){
   if(obj.timer){clearInterval(obj.timer);}
        var curr=parseFloat(getStyle(obj,'left'));
        var dis=Math.abs(aim-curr);
        var symbol=(aim-curr)/dis;
        var cover=0;
        var stepLength=dis/25;
        var step=function(){
            if(cover+stepLength<dis){
                obj.style.left=parseFloat(getStyle(obj,'left'))+stepLength*symbol+'px';
                cover+=stepLength;
            }else{
                obj.style.left=aim+'px';
                clearInterval(obj.timer);
            }

        }
        obj.timer=setInterval(step,20);
}



function getStyle(elem,cssname){
        if(window.getComputedStyle){
            return window.getComputedStyle(elem)[cssname];
        }else{
            return elem.currentStyle[cssname];
        }
    }

</script>
<html>

 

posted @ 2017-10-09 17:02  叶青山  阅读(191)  评论(0)    收藏  举报