<!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. hdu6354 /// 圆的相交

    题目大意: 给定m r 初始圆盘以原点为圆心半径为r 给定m个圆的圆心(x,y) 半径r 保证m个圆互不相交且不会覆盖圆盘 用这m个圆来切割初始的圆盘求最后圆盘外围的长度 求圆与圆盘的交点 减去圆盘上 ...

  2. Java split的用法

    java.lang.string.split split 方法 将一个字符串分割为子字符串,然后将结果作为字符串数组返回. stringObj.split([separator,[limit]]) s ...

  3. Unity中实现网格轮廓效果，选中边框效果

    问题背景: 最近要实现选中实体的高亮效果,要那种类似于unity中Outline的效果,网格轮廓高亮效果. 效果图: 具体代码: OutlineEffect.cs 实体高亮效果类: 轮廓边总控制类,该 ...

  4. PyQt5初识

    学习PyQt5是个机缘,那是因为我的linux16.04+python3.6使了浑身解数也装不上PyQt4! PyQt5的官方文档貌似是要钱的!又想快速了解这个东东,我还是借鉴了万能的博客园大佬博主: ...

  5. Flyway 学习时遇到的错误

    错误一: No plugin found for prefix 'flyway' in the current project and in the plugin groups  找不到Flyway插 ...

  6. workman

    workman安装: 环境安装: 检测依赖环境是否安装 rpm -qa | grep “软件或者包的名字”或者 yum list installed eg: rpm -qa | grep libeve ...

  7. Eureka中的三种角色分别是什么？

    Eureka中的三种角色分别是什么? 1.Eureka Server 通过Register.Get.Renew等接口提供服务的注册和发现. 2.Application Service (Service ...

  8. typescript + vue开发遇到的坑

    1,错误 :TS2304: Cannot find name 'require' 在ts使用nodejs,没有安装nodejs的TypeScript定义类型 ,使用require报的错 解决方法:如果 ...

  9. java 直接调用micorosoft office （2003-2007和2010版本）中excel中计算函数

    主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx 读取excel和MySQL相关: java的poi技 ...

  10. NX二次开发-获得图纸抑制尺寸的表达式UF_DRF_ask_controlling_exp

    #include <uf.h> #include <uf_modl.h> #include <uf_drf.h> #include <uf_obj.h> ...