<!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. 项目警告：There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.Use equal casing. Compare these modul

    记录个自己遇到的问题: 上星期项目刚拉取下来的时候运行没有任何警告,晚上回去vscode提示更新新的东西,当时没管就立即更新了,第二天重启项目直接一大堆警告冒了出来: There are multip ...

  2. python 基本输入输出

  3. 从零开始搭建系统2.4——Jenkins安装及配置

    1.安装wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins.io/redhat-stable/jenkins.reporpm --impo ...

  4. eclipse打包jar及第三方jar包一起导出(生成SDK)

    一.前言: 因公司需求,需要将某个工具类供外部使用,所以需要生成jar文件.但是jar内还包含了第三方的jar,普通的打包方式无法将lib下的第三方jar包提取. 这将会导致工具jar无法运行,或Ex ...

  5. jq-demo-阻止冒泡，阻止默认行为

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js实现截取字符串后几位

    var strs ="wdsdabcdefages" strs.substring(obj.filename.lastIndexOf("a")+1,strs.l ...

  7. hadoop创建目录文件失败

    mkdir: Cannot create directory /file. Name node is in safe mode.   刚刚在hadoop想创建一个目录的时候,发现报错了 具体信息如下: ...

  8. wordpress添加视频弹窗插件Video PopUp

    Video PopUp 给外部div 添加class类名:class="main-play" a链接添加  class="vp-a" 测试链接地址:https: ...

  9. C++11的闭包(lambda、function、bind)

    c++11开始支持闭包,闭包:与函数A调用函数B相比较,闭包中函数A调用函数B,可以不通过函数A给函数B传递函数参数,而使函数B可以访问函数A的上下文环境才可见(函数A可直接访问到)的变量:比如: 函 ...

  10. Delphi 取整函数round、trunc、ceil和floor

    Delphi 取整函数round.trunc.ceil和floor 1.Round(四舍六入五留双)功能说明:对一个实数进行四舍五入.(按照银行家算法)例:var i, j: Integer;begi ...