zoukankan      html  css  js  c++  java
  • 一阶段项目 总结 之 两张图片对比 手写 jquery 也可以使用beer slider 插件

    <!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%;
         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;
         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;
         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;
         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,
                now_x2});
        $(".move-line").css({
                //top:now_y,
                left:now_x1
              });
           });
         });
       /* 当鼠标左键松开,接触事件绑定 */
       $(document).bind("mouseup",function(){
         $(this).unbind("mousemove");
       });
     })
    </script>
     
  • 相关阅读:
    1.5.2 在IIS上配置ASP.NET(转)
    数据结构二叉树的基本编码(原创)
    真正的AmChart破解教程和RadarChart使用(转)
    C#遍历文件中的文件或者文件夹(转)
    [Android]在代码中创建布局
    [AS]AIR 中获取本地 IP API
    [Android][转]Android获取网页数据的方法总结
    [AS][iOS]AIR应用在iOS中,home键退出
    [Android]ListView学习(一)
    [Android]TextView 单行文本过长显示的属性
  • 原文地址:https://www.cnblogs.com/zqy6666/p/11966713.html
Copyright © 2011-2022 走看看