js拖动图片(仿滑动)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"=87"http://www.w3.org/TR/html4/strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>ex</title>
  <script src="js/addHandler.js"></script>
  <meta name="author" content="yl" />
  <!-- Date: 2014-10-20 -->
  <style>
    #view {
      width:300px;
      height:120px;
      margin:0 auto;
      overflow: hidden;
      position: relative;
      border: 1px solid black;
    }
    #imgContainer {
      width:800px;
      height:120px;
      border:1px solid black;
      position: absolute;
    }




    #imgContainer img{
      width:100px;
      height:120px;
      float:left;
      
    }
    .widr{
     -moz-transform: scale(1.2,1.2);
     -webkit-transform: scale(1.2,1.2);
     -o-transform: scale(1.2,1.2);
     -ms-transform: scale(1.2,1.2);
     transform: scale(1.2,1.2);
     -moz-transition: all 0.5s ease-in;
     -webkit-transition: all 0.5s ease-in;
     -o-transition: all 0.5s ease-in;
     transition: all 0.5s ease-in;
    }
    .wid{
      -moz-transform: scale(0.85,0.85);
     -webkit-transform: scale(0.85,0.85);
     -o-transform: scale(0.85,0.85);
     -ms-transform: scale(0.85,0.85);
     transform: scale(0.85,0.85);
     -moz-transition: all 0.5s ease-in;
     -webkit-transition: all 0.5s ease-in;
     -o-transition: all 0.5s ease-in;
     transition: all 0.5s ease-in;
    }
  </style>
</head>
<body>
  <div id="view">
    <div id="imgContainer">
      <img src="img/demo.jpg">
      <img src="img/demo2.jpg">
      <img src="img/demo3.jpeg">
      <img src="img/demo4.jpg">
      <img src="img/demo5.jpg">
      <img src="img/demo6.jpg">
      <img src="img/demo7.jpg">
      <img src="img/demo8.jpg">
      <img src="img/demo9.jpg">
    </div>
  </div>
  <script>


    var imgDiv=document.getElementById("imgContainer");
    imgDiv.style.left=-300+"px";
    // var imgX=imgDiv.offsetLeft;
    EventUtil.addHandler(imgDiv,"mousedown",function(event){
      var event=EventUtil.getEvent(event);
      var imgX=imgDiv.offsetLeft;
      var mouseX=event.clientX;
      var deltaX=mouseX-imgX;
      var im=document.getElementsByTagName("img");
      
      EventUtil.addHandler(imgDiv,"mousemove",moveHandle);      
      EventUtil.addHandler(imgDiv,"mouseup",upHandle);  
      function moveHandle(event){  
        imgDiv.style.left = (event.clientX - deltaX)+"px";
        EventUtil.preventDefault(event);        
      }  
      
      function upHandle(){            
        if(parseInt(imgDiv.style.left)<parseInt((-390+"px"))&&parseInt(imgDiv.style.left)>-500)
        {
          imgDiv.appendChild(im[0]);
          im[3].setAttribute("class",null);
          im[4].setAttribute("class","widr");
          imgDiv.style.left=-300+"px";
        }
        else if(parseInt(imgDiv.style.left)<-500){
          imgDiv.appendChild(im[0]);
          imgDiv.appendChild(im[0]);
          im[2].setAttribute("class",null);
          im[3].setAttribute("class",null);
          im[4].setAttribute("class","widr");
          imgDiv.style.left=-300+"px";
        }
        else if(parseInt(imgDiv.style.left)>parseInt((-201+"px"))&&parseInt(imgDiv.style.left)<-100){
          imgDiv.insertBefore(im[8],im[0]);
          im[5].setAttribute("class",null);
          im[4].setAttribute("class","widr");
          imgDiv.style.left=-300+"px";
        }
        else if(parseInt(imgDiv.style.left)>-99){
          imgDiv.insertBefore(im[8],im[0]);
          imgDiv.insertBefore(im[8],im[0]);
          im[5].setAttribute("class",null);
          im[6].setAttribute("class",null);
          im[4].setAttribute("class","widr");
          imgDiv.style.left=-300+"px";
        }   
        
        EventUtil.removeHandler(imgDiv,"mousemove",moveHandle);  
        EventUtil.removeHandler(imgDiv,"mouseup",upHandle);  
      }
      
    });       
  </script>
  <script src="js/addHandler.js"></script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值