<!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. 如何在react中实现一个table切换？

    废话不说,直接贴代码,供新手参考 <!DOCTYPE html> export default class TabComponent extends Component { constru ...

  2. 装箱与拆箱（TDB）

    装箱:把值类型转换为引用类型 拆箱:把引用类型转换为值类型 只能对之前装箱的变量进行拆箱.需要强制转换.

  3. Centos下的 docker安装

    安装一些必要的系统工具:sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添加软件源信息:sudo yum-config ...

  4. JavaScript中this对象原理简洁说明

    今天看了阮一峰大神的博客文章:JavaScript 的this原理,把纠结很久的this的指向终于理解清楚了 原文:http://www.ruanyifeng.com/blog/2018/06/jav ...

  5. C#操作Word的+ CKEditor 輸出成Word文件(包含圖案上傳)

    C#操作Word 参考博文: C#操作word类文件 https://www.cnblogs.com/walking/p/3571068.html C#中的Office操作专栏(21) http:// ...

  6. linux指令【参考鸟哥的Linux私房菜】

    date指令  显示日期 cal指令 显示日历 bc  计算器  scale+number  显示几位小数  quit退出bc tab键  命令提示  入输入ca,按下tab键,会将所有ca的指令全部 ...

  7. html 通过input video canvas 打开摄像头 定制相机

    在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...

  8. 16. 继承（extends）

    1.语法 class 类名1 extends 类名2{ //成员变量和成员方法 } 2.继承要注意的事项: 1)千万不要为了减少重复代码而去继承,只有真正存在着继承关系的时候才去继承. 2)父类私有的 ...

  9. mysql 存储过程 随笔

    CREATE PROCEDURE `g2`( in sts int,in type int, code varchar(20),in s int)begin declare i int; declar ...

  10. Python 列表,元组,字典

    0)字符串切片 py_str = 'python' >>>py_str[0] #取第一个字符串,返回值为"p",超出范围会报错 >>>py_st ...