首页 > 代码库 > 做了一个js的拉动遮罩层，两个图片分别显示的效果
做了一个js的拉动遮罩层，两个图片分别显示的效果
想做成车修好了和没修好的对比，所以需要两个图片。需要用到的知识点，
1、定位
2、mouse 的事件（代码中体现）
3、鼠标指针的移动距离算法
4、css中，cursor的应用
好了，废话不多说 ，直接上代码
网站需要的素材，接着往下看下载
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 58 }); 59 $(document).mousemove(function(e) { 60 if(_move == true) 61 { 62 var x = e.pageX - _x; 63 if(x > 0 && x < 1100){ 64 arg.css({‘left‘:x}); 65 mover.css({‘left‘:x+21}); 66 } 67 if (x<=0) { 68 arg.css({‘left‘:‘0px‘}); 69 mover.css({‘left‘:‘21px‘}); 70 } 71 if (x>1053) { 72 arg.css({‘left‘:‘1058px‘}); 73 mover.css({‘left‘:‘1079px‘}); 74 } 75 76 } 77 }).mouseup(function(e){ 78 _move = false; 79 }); 80 81 b = function(){ 82 83 var i; 84 arg.animate({left:‘1058px‘},800); 85 mover.animate({left:‘1079px‘},800,function(){ 86 arg.animate({left:‘0px‘},800); 87 mover.animate({left:‘21px‘},800,function(){ 88 arg.animate({‘left‘:‘529px‘},800); 89 mover.animate({‘left‘:‘550px‘},800); 90 }); 91 }); 92 93 } 94 b(); 95 return this; 96 } 97 ab(arg); 98 99 }100 })(jQuery);101 102 $(‘.handle‘).drag(this,‘box2‘);103 104 </script>105 </body>106 </html>
具体的文件在附件中。请下载
http://pan.baidu.com/s/1pJz8ytP
做了一个js的拉动遮罩层，两个图片分别显示的效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。