码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-12-01 18:37:56      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:javascrip   line   ack   top   public   doctype   样式   min   tom   

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="../../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  设置样式
<style type="text/css">
   .aa{
    background-image: url(../../img/kongtiao/clean.jpg);
    position: relative;
    background-repeat: no-repeat;
        background-position: center 0;
        background-size: cover;
     height: 760px;
   }
   .move-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    /* background: #fff; */
    background: bisque;
    z-index: 3;
   }
   #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 插件

标签:javascrip   line   ack   top   public   doctype   样式   min   tom   

原文地址:https://www.cnblogs.com/zqy6666/p/11966713.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!