个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

工作一个多月了，好久没来冒冒泡了，看了@wayong的JQ插件教程，自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件，现在跟朋友们分享分享！

先上demo链接：http://runjs.cn/detail/gpowdhhk 

快要下班了~先把代码放出来~~回家再编辑~

这里是HTML代码：

 1 <!--js酷炫图片滑动hover效果，类似拉勾网-->
 2 <div class="beauty-go-outer" id="my-div">
 3     <ul class="beauty-list">
 4         <li class="beauty-item item1"><a href="#" target="_blank">
 5             <div class="front">
 6                 <span class="left"></span>
 7                 <span class="right"></span>
 8             </div>
 9             <div class="back">
10                 <span class="left"></span>
11                 <span class="right"></span>
12             </div>
13         </a></li>
1　　　　　　......//相同结构，想要多少加多少
84     </ul>
85 </div>
86 <!-- 酷炫图片滑动效果结束 -->

这里是CSS代码：

//可以根据个人需要调整各块内容的大小，完全由你做主！
 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 ul,li{
 6     list-style-type: none;
 7 }
 8 .beauty-go-outer{
 9     width: 840px;
10     height: 1000px;
11     background-color: #a3a3a3;
12     overflow: hidden;
13     margin: auto;
14 }
15 .beauty-item{
16     float: left;
17     position: relative;
18     width: 400px;
19     height: 200px;
20     margin-right: 10px;
21     margin-bottom: 10px;
22     overflow: hidden;
23 }
24 .beauty-item .front,.beauty-item .back{
25     width: 400px;
26     height: 200px;
27     position: absolute;
28     left: 0;
29     top: 0;
30 }
31 .beauty-item .back{
32     display: none;
33 }
34 
35 .beauty-item .left,.beauty-item .right{
36     display: block;
37     float: left;
38     width: 200px;
39     height: 200px;
40 }
41 .beauty-item .front .left{
42     background-color: cornflowerblue;
43 }
44 .beauty-item .front .right{
45     background-color: forestgreen;
46 }
47 .beauty-item .back .left{
48     background-color: darkblue;
49 }
50 .beauty-item .back .right{
51     background-color: deeppink;
52 }
53 
54 /*图片导入*/
55 .item1 .front .left{
56     background: url("images/slideImgShow/1.jpg") no-repeat 0 0;
57 }
58 .item1 .front .right{
59     background: url("images/slideImgShow/5.jpg") no-repeat 0 0;
60 }
61 .item1 .back .left{
62     background: url("images/slideImgShow/5.jpg") no-repeat 0 0;
63 }
64 .item1 .back .right{
65     background: url("images/slideImgShow/1.jpg") no-repeat 0 0;
66 }   
   .............//这里根据内容块的多少，添加内容块的背景图片，重复的事~~~~(>_<)~~~~

这里是js代码：

 1 /*
  2 * 酷炫图片滑动展示效果插件
  3 * 尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。O(∩_∩)O哈哈~
  4 * */
  5 //依赖方法1: 获取元素的坐标
  6 $.get_pos = function(elem){
  7     if(!elem) return false;
  8     var left = elem.offsetLeft,
  9         top = elem.offsetTop,
 10         current = elem.offsetParent;
 11     while(current !== null){
 12         left += current.offsetLeft;
 13         top += current.offsetTop;
 14         current = current.offsetParent;
 15     }
 16     return {"left": left, "top": top};
 17 };
 18 //依赖方法2：判断鼠标进入/移出元素的方向
 19 $.get_dir = function(elem, mouse_pos){
 20     if(!elem) return false;
 21     var pos = $.get_pos(elem),
 22         size = {"width": elem.offsetWidth, "height": elem.offsetHeight},
 23         dx = mouse_pos.x - pos.left - size.width/2,
 24         dy = (mouse_pos.y - pos.top - size.height/2)*-1,
 25         eve_tan = dy/dx,
 26         tan = size.height/size.width;
 27     if(dx != 0){
 28         if(eve_tan > tan*-1 && eve_tan < tan && dx < 0){
 29             return "left";
 30         }else if(eve_tan > tan*-1 && eve_tan < tan && dx > 0){
 31             return "right";
 32         }else if((eve_tan > tan || eve_tan < tan*-1) && dy > 0){
 33             return "top";
 34         }else if((eve_tan > tan || eve_tan < tan*-1) && dy <= 0){
 35             return "bottom";
 36         }
 37     }else if(dy > 0){
 38         return "top";
 39     }else {
 40         return "bottom";
 41     }
 42 };
 43 
 44 //特效主函数
 45 ;(function($,window,document,undefined){      //这里的 ; 是为了保证不与前面的函数发生冲突，没有分号，
 46 //    定义beautifier构造函数，创建类             //如果前面的代码缺少分号，则会被认为这些代码和前面是一起的，从而出错
 47     var ContainerObj = function(ele){
 48         this.wrapper = ele;
 49         this.box = ele.find('.beauty-item');
 50     };
 51 //在Beautifier原型上添加修改CSS属性的方法
 52     ContainerObj.prototype = {
 53         addSlideEvent : function(){
 54             var mouse_pos, x, y;
 55             for(var i = 0,max = this.box.length;i < max;i++){
 56                 this.box.eq(i).on('mouseenter',function(e){
 57                     e.stopPropagation();
 58                     x = e.pageX;
 59                     y = e.pageY;
 60                     mouse_pos = {'x': x, 'y': y};
 61                     var dir = $.get_dir(this,mouse_pos);
 62                     switch (dir){
 63                         case 'left':
 64                             $(this).find('.back').eq(0).css({
 65                                 left : '-100%',
 66                                 top : '0',
 67                                 display : 'block'
 68                             }).stop().animate({
 69                                 left : '0',
 70                                 top : '0'
 71                             },300,false);
 72                             break;
 73                         case 'right':
 74                             $(this).find('.back').eq(0).css({
 75                                 left : '100%',
 76                                 top : '0',
 77                                 display : 'block'
 78                             }).stop().animate({
 79                                 left : '0',
 80                                 top : '0'
 81                             },300,false);
 82                             break;
 83                         case 'top':
 84                             $(this).find('.back').eq(0).css({
 85                                 left : '0',
 86                                 top : '-100%',
 87                                 display : 'block'
 88                             }).stop().animate({
 89                                 left : '0',
 90                                 top : '0'
 91                             },300,false);
 92                             break;
 93                         case 'bottom':
 94                             $(this).find('.back').eq(0).css({
 95                                 left : '0',
 96                                 top : '100%',
 97                                 display : 'block'
 98                             }).stop().animate({
 99                                 left : '0',
100                                 top : '0'
101                             },300,false);
102                             break;
103                         default: break;
104                     }
105                 });
106                 this.box.eq(i).on('mouseleave',function(e){
107                     e.stopPropagation();
108                     x = e.pageX;
109                     y = e.pageY;
110                     mouse_pos = {'x': x, 'y': y};
111                     var dir = $.get_dir(this,mouse_pos);
112                     switch (dir){
113                         case 'left':
114                             $(this).find('.back').eq(0).stop().animate({
115                                 left : '-100%',
116                                 top : '0'
117                             },300,false);
118                             break;
119                         case 'right':
120                             $(this).find('.back').eq(0).stop().animate({
121                                 left : '100%',
122                                 top : '0'
123                             },300,false);
124                             break;
125                         case 'top':
126                             $(this).find('.back').eq(0).stop().animate({
127                                 left : '0',
128                                 top : '-100%'
129                             },300,false);
130                             break;
131                         case 'bottom':
132                             $(this).find('.back').eq(0).stop().animate({
133                                 left : '0',
134                                 top : '100%'
135                             },300,false);
136                             break;
137                         default: break;
138                     }
139                 });
140 
141             }
142             return this.wrapper;
143         }
144     };
145 
146     $.fn.slideImgShow = function(){
147         var containerObj = new ContainerObj(this);
148         return containerObj.addSlideEvent();
149     }
150 
151 })(jQuery,window,document);
152 
153 //调用就是这么简单~跟一个JQ的API一样一样的噢~链式操作也是没有断的，还可以进行其他操作！
154 $("#my-div").slideImgShow();

代码发完了~~~感觉自己又小小的爬升了一个台阶，加油，每天积累一点点，1年后就积累365个点点！

谢谢@wayong 的JQ插件教程，受益匪浅！

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/soccerloway/p/3981974.html