左右推拽顯示對比圖-jQyery封裝-附源文件

2024-04-27 15:01:33

字體：大中小

來源：轉載

供稿：網友

閑來無事，做了一個模塊效果

左右拖拽顯示對比圖，是用jq封裝的

利用鼠標距離左側（0，0）坐標的橫坐標位移來控制絕對定位的left值

再配合背景圖fixed屬性，來制作視覺差效果

代碼如下

 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>左右推拽顯示對比圖</title> 6 <style> 7 body {overflow:hidden;background:#000;}* {margin:0;padding:0;} 8 .wrap {width:1100px;height:610px;border:solid 1px #ddd;margin:0 auto;position:relative;overflow:hidden;background:#fff;} 9 .box1,.box2 {width:1100px;height:610px;position:absolute;left:0;top:0;}10 .box1 {z-index:2;background:url(images/car-01.png) center fixed no-repeat;}11 .box2 {z-index:3;background:url(images/car-02.png) center #ddd fixed no-repeat;left:550px;}12 .handle {width:42px;height:42px;background:url(images/hand.png) no-repeat;position:absolute;left:529px;z-index:10;top:400px;}13 14 .cursor {cursor:url(images/6.ico),auto;}15 .nocur {cursor:default;}16 </style>17 <script src="js/jquery-1.7.2.min.js"></script>18 </head>19 20 <body id="body">21 <div class="wrap">22     <div class="box1"></div>23     <div class="box2"></div>24     <div class="handle"></div>25 </div>26 27 <script>28 29 ;(function($){30     $.fn.drag = function(arg,mover){31         var _move = false;//先給不讓移動32         mover = $('.'+mover)33         var _x; 34         var _y; //鼠標離左上角的值35         arg = this;36         function ab(arg){    37             arg.mouSEOver(function(){38                 $('body').addClass('cursor');39             });    40             arg.mouseout(function(){41                 $('body').removeClass('cursor');    42             });43             arg.mousedown(function(){44                 this.style.cursor = 'url(images/5.ico),auto';45             });46             arg.mouseup(function(){47                 this.style.cursor = 'url(images/6.ico),auto';48             });49             50             arg.click(function(e) {51                 var e = e || window.event;52                 //alert('按下鼠標');53                 }).mousedown(function(e) {54                 _move = true;55                 _x = e.pageX - parseInt(arg.CSS('left'));//獲取左上角坐標 _x            56             });57             $(document).mousemove(function(e) {58                 if(_move == true)59                 {60                     var x = e.pageX - _x;// 鼠標當前位置減去（鼠標當前位置，距離元素左上角的距離 s ）   獲得現在左上角距離瀏覽器左上角的新值61                     if(x > 0 && x < 1100){62                         arg.css({'left':x});63                         mover.css({'left':x+21});64                     } 65                     if (x<=0) {66                         arg.css({'left':'0px'});67                         mover.css({'left':'21px'});68                     }69                     if (x>1053) {70                         arg.css({'left':'1058px'});71                         mover.css({'left':'1079px'});72                     }                73                 }74             }).mouseup(function(e){75                 _move = false;76             });77             78             b = function(){            79                 var i;80                 arg.animate({left:'1058px'},800);81                 mover.animate({left:'1079px'},800,function(){82                     arg.animate({left:'0px'},800);83                     mover.animate({left:'21px'},800,function(){84                         arg.animate({'left':'529px'},800);85                         mover.animate({'left':'550px'},800);86                     });    87                 });            88             }89             b();90             return this;91         }92         ab(arg);    93     }94 })(jQuery);95 $('.handle').drag(this,'box2');96 97 </script>98 </body>99 </html>