一阶段项目总结之两张图片对比手写 jquery 也可以使用beer slider 插件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
设置样式

   #cca {
    background-image: url(../../img/kongtiao/clean-btn.png);
    position: absolute;
    bottom: 120px;
    left: -76px;
    width: 77px;
    height: 77px;
    margin-left: 38px;
    background-color: #c7b69d;
    border-radius: 50%;
    z-index: 4;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 100% 100%;
    cursor: pointer;
   }
   .img{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    /* border: 1px solid black; */
   }
   .img1{
    background-image: url(../../img/kongtiao/clean-mask.png);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center 0;
    background-position-y: 70%;
   }
  </style>
</head>

HTML代码
<body>
  <div class="aa">
   <div class="img">
    <div class="img1">

    </div>
   </div>
   <div class="move-line">
    <span id="cca"></span>
   </div>
  </div>
</body>
</html>

JQ代码：
<script type="text/javascript">
$(document).ready(function(){
   var cca = $(".move-line");
   /* 绑定鼠标左键按住事件 */
   cca.bind("mousedown",function(event){
     /* 获取需要拖动节点的坐标 */
     var offset_x = $(this)[0].offsetLeft;//x坐标
  var offset_x2 = $("html").width()-offset_x;//x坐标
     //var offset_y = $(this)[0].offsetTop;//y坐标
     /* 获取当前鼠标的坐标 */
     var mouse_x = event.pageX;
     //var mouse_y = event.pageY;
     /* 绑定拖动事件 */
     /* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
     $(document).bind("mousemove",function(ev){
       /* 计算鼠标移动了的位置 */
       var _x = ev.pageX - mouse_x;
       //var _y = ev.pageY - mouse_y;
    var now_x1 = (offset_x + _x )
    if (now_x1<=$("html").width()) {
     /* 设置移动后的元素坐标 */
    var now_x1 = (offset_x + _x ) + "px";
    var now_x2 = (offset_x2 - _x ) + "px";
    } else{
    var now_x1 = $("html").width() + "px";
    var now_x2 = 0 + "px";
    }

       //var now_y = (offset_y + _y ) + "px";
       /* 改变目标元素的位置 */

    $(".img").css({
            //top:now_y,
            width:now_x2});
    $(".move-line").css({
            //top:now_y,
            left:now_x1
          });
       });
     });
   /* 当鼠标左键松开，接触事件绑定 */
   $(document).bind("mouseup",function(){
     $(this).unbind("mousemove");
   });
})
</script>

一阶段项目 总结 之 两张图片对比 手写 jquery 也可以使用beer slider 插件

猜你喜欢

一阶段项目总结之两张图片对比手写 jquery 也可以使用beer slider 插件