js拖动图片（仿滑动)

最新推荐文章于 2022-06-15 14:45:38 发布

__Daniel

最新推荐文章于 2022-06-15 14:45:38 发布

阅读量704

点赞数

分类专栏：练习文章标签： javascript html js

本文链接：https://blog.csdn.net/u013291076/article/details/40305125

版权

练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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