你的位置:首页 > Java教程

[Java教程]左右推拽显示对比图


闲来无事,做了一个模块效果

左右拖拽显示对比图,是用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>

封装的不是很彻底,不过主体效果实现了,可以自己拿着修改一下啊

下面的是缩略图

 

http://files.cnblogs.com/files/Sinhtml/animation.rar