码迷,mamicode.com
首页 > Web开发 > 详细

做了一个js的拉动遮罩层,两个图片分别显示的效果

时间:2014-09-12 14:41:43      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   文件   art   

想做成车修好了和没修好的对比,所以需要两个图片。需要用到的知识点,

1、定位

2、mouse 的事件(代码中体现)

3、鼠标指针的移动距离算法

4、css中,cursor的应用

好了,废话不多说 ,直接上代码

网站需要的素材,接着往下看下载

 

bubuko.com,布布扣
  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>
View Code

 

 

 

具体的文件在附件中。请下载
http://pan.baidu.com/s/1pJz8ytP

 

做了一个js的拉动遮罩层,两个图片分别显示的效果

标签:style   blog   http   color   io   os   ar   文件   art   

原文地址:http://www.cnblogs.com/Sinhtml/p/3968230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!