<!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 插件的更多相关文章

  1. 太刺激了，面试官让我手写跳表，而我用两种实现方式吊打了TA！

    前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识. 你好,我是彤哥. 上一节,我们一起学习了关于跳表的理论知识,相信通过上一节的学习,你一定可以给面试官完完 ...

  2. 用python对比两张图片的不同

    from PIL import Image from PIL import ImageChops def compare_images(path_one, path_two, diff_save_lo ...

  3. python实战===用python对比两张图片的不同

    from PIL import Image from PIL import ImageChops def compare_images(path_one, path_two, diff_save_lo ...

  4. [Alpha阶段]项目展示博客

    目录 Alpha阶段项目展示 1.团队成员介绍 2.工程相关信息 (1)我们的用户 (2)产品表现 (3)团队分工 (4)项目管理 (5)测试 (6)文档 (7)用户调研 3.项目信息 (1)实际进展 ...

  5. 秘制牛肉Alpha阶段项目展示

    秘制牛肉Alpha阶段项目展示 1.团队成员和个人博客 · 左顺:"我是左顺,秘制牛肉队开发人员". · 王尖兵:"C,java,html5都会一点的菜鸡,没做过团队项目 ...

  6. beta阶段——项目复审

    beta阶段--项目复审 小组的名字和链接 优点 缺点 bug 排名顺序 颜罗王team http://www.cnblogs.com/LDLYMteam 界面清新,音乐能够选择是否播放,词汇按照四六 ...

  7. Beta阶段项目展示博客

    Beta阶段项目展示 团队成员的简介 详细见团队简介 角色 姓名 照片 项目经理,策划 游心 策划 王子铭 策划 蔡帜 美工 赵晓宇 美工 王辰昱 开发.架构师 解小锐 开发 陈鑫 开发 李金奇 开发 ...

  8. Gamma阶段项目展示

    Gamma阶段项目展示 一. 团队成员介绍 姓名 Gamma职责 个人博客 张圆宁 PM,后端 个人博客 王文珺 后端 个人博客 牛宇航 后端 个人博客 申化文 后端 个人博客 汪慕澜 测试,部署 个 ...

  9. 秘制牛肉Gamma阶段项目展示

    秘制牛肉Gamma阶段项目展示 1.团队成员和个人博客 · 左顺:在项目中主要负责后端开发.个人博客 · 袁勤:精通网页项目开发,前端后端都很强,在完成自己后端任务后也会积极帮助其他人的任务.个人博客 ...

随机推荐

  1. Size Assert

    判断返回内容的大小

  2. SpringMVC前后端参数交互

    Controller中使用JSON方式有多种 关键在于ajax请求是将数据以什么形式传递到后台 HTTP请求中: 如果是get请求,那么表单参数以name=value&name1=value1 ...

  3. ubuntu phpize 安裝

    php 版本 7.2,所以安裝 php7.2的 sudo apt-get install php7.2-dev 參考 Is is possible to install phpize for PHP7 ...

  4. spark运行任务报错：Container [...] is running beyond physical memory limits. Current usage: 3.0 GB of 3 GB physical memory used; 5.0 GB of 6.3 GB virtual memory used. Killing container.

    spark版本:1.6.0 scala版本:2.10 报错日志: Application application_1562341921664_2123 failed 2 times due to AM ...

  5. Java HashSet和ArrayList的查找Contains（）时间复杂度

    今天在刷leetCode时,碰到了一个题是这样的. 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 看到 ...

  6. Delphi txt文件读取及写入

    简介:Delphi支持三种文件类型:文本文件.记录文件.无类型文件.文本文件的读...   在进行win32开发中对文件的读写是最常用的操作之一 Delphi 支持三种文件类型:  文本文件.记录文件 ...

  7. GlobalExceptionHandler 捕获抛出的异常，返回特定值给前端

    /** * @author hhh * @date 2019/1/17 16:28 * @Despriction */ @ResponseBody @ControllerAdvice @Log4j2 ...

  8. Spring-Security (学习记录七)--实现FilterInvocationSecurityMetadataSource的类将无法切入声明式事物

    目录 1 查看继承关系 2 说明 3 查看源码: 实现了FilterInvocationSecurityMetadataSource 的类将无法切入声明式事物. 原因: 1 查看继承关系 先查看Fil ...

  9. Qt无边框窗口的移动、拉伸边框、鼠标滚轮缩放大小

    主要是处理窗口上鼠标的几个事件,具体代码请看下面的截图, 完整代码的下载链接在此:http://download.csdn.net/detail/beyond0824/9657110, 本示例代码中, ...

  10. https://segmentfault.com 一个学习网站

    https://segmentfault.com一个学习网站