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

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

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

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

这里是HTML代码：

 <!--js酷炫图片滑动hover效果，类似拉勾网-->
 <div class="beauty-go-outer" id="my-div">
     <ul class="beauty-list">
         <li class="beauty-item item1"><a href="#" target="_blank">
             <div class="front">
                 <span class="left"></span>
                 <span class="right"></span>
             </div>
             <div class="back">
                 <span class="left"></span>
                 <span class="right"></span>
             </div>
         </a></li>
1　　　　　　......//相同结构，想要多少加多少
     </ul>
 </div>
 <!-- 酷炫图片滑动效果结束 -->

这里是CSS代码：

//可以根据个人需要调整各块内容的大小，完全由你做主！
 1 *{
     margin:;
     padding:;
 }
 ul,li{
     list-style-type: none;
 }
 .beauty-go-outer{
     width: 840px;
     height: 1000px;
     background-color: #a3a3a3;
     overflow: hidden;
     margin: auto;
 }
 .beauty-item{
     float: left;
     position: relative;
     width: 400px;
     height: 200px;
     margin-right: 10px;
     margin-bottom: 10px;
     overflow: hidden;
 }
 .beauty-item .front,.beauty-item .back{
     width: 400px;
     height: 200px;
     position: absolute;
     left:;
     top:;
 }
 .beauty-item .back{
     display: none;
 }

 .beauty-item .left,.beauty-item .right{
     display: block;
     float: left;
     width: 200px;
     height: 200px;
 }
 .beauty-item .front .left{
     background-color: cornflowerblue;
 }
 .beauty-item .front .right{
     background-color: forestgreen;
 }
 .beauty-item .back .left{
     background-color: darkblue;
 }
 .beauty-item .back .right{
     background-color: deeppink;
 }

 /*图片导入*/
 .item1 .front .left{
     background: url("images/slideImgShow/1.jpg") no-repeat 0 0;
 }
 .item1 .front .right{
     background: url("images/slideImgShow/5.jpg") no-repeat 0 0;
 }
 .item1 .back .left{
     background: url("images/slideImgShow/5.jpg") no-repeat 0 0;
 }
 .item1 .back .right{
     background: url("images/slideImgShow/1.jpg") no-repeat 0 0;
 }   
   .............//这里根据内容块的多少，添加内容块的背景图片，重复的事~~~~(>_<)~~~~ 

这里是js代码：

 /*
 * 酷炫图片滑动展示效果插件
 * 尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。O(∩_∩)O哈哈~
 * */
 //依赖方法1: 获取元素的坐标
 $.get_pos = function(elem){
     if(!elem) return false;
     var left = elem.offsetLeft,
         top = elem.offsetTop,
         current = elem.offsetParent;
     while(current !== null){
         left += current.offsetLeft;
         top += current.offsetTop;
         current = current.offsetParent;
     }
     return {"left": left, "top": top};
 };
 //依赖方法2：判断鼠标进入/移出元素的方向
 $.get_dir = function(elem, mouse_pos){
     if(!elem) return false;
     var pos = $.get_pos(elem),
         size = {"width": elem.offsetWidth, "height": elem.offsetHeight},
         dx = mouse_pos.x - pos.left - size.width/2,
         dy = (mouse_pos.y - pos.top - size.height/2)*-1,
         eve_tan = dy/dx,
         tan = size.height/size.width;
     if(dx != 0){
         if(eve_tan > tan*-1 && eve_tan < tan && dx < 0){
             return "left";
         }else if(eve_tan > tan*-1 && eve_tan < tan && dx > 0){
             return "right";
         }else if((eve_tan > tan || eve_tan < tan*-1) && dy > 0){
             return "top";
         }else if((eve_tan > tan || eve_tan < tan*-1) && dy <= 0){
             return "bottom";
         }
     }else if(dy > 0){
         return "top";
     }else {
         return "bottom";
     }
 };

 //特效主函数
 ;(function($,window,document,undefined){      //这里的 ; 是为了保证不与前面的函数发生冲突，没有分号，
 //    定义beautifier构造函数，创建类             //如果前面的代码缺少分号，则会被认为这些代码和前面是一起的，从而出错
     var ContainerObj = function(ele){
         this.wrapper = ele;
         this.box = ele.find('.beauty-item');
     };
 //在Beautifier原型上添加修改CSS属性的方法
     ContainerObj.prototype = {
         addSlideEvent : function(){
             var mouse_pos, x, y;
             for(var i = 0,max = this.box.length;i < max;i++){
                 this.box.eq(i).on('mouseenter',function(e){
                     e.stopPropagation();
                     x = e.pageX;
                     y = e.pageY;
                     mouse_pos = {'x': x, 'y': y};
                     var dir = $.get_dir(this,mouse_pos);
                     switch (dir){
                         case 'left':
                             $(this).find('.back').eq(0).css({
                                 left : '-100%',
                                 top : '0',
                                 display : 'block'
                             }).stop().animate({
                                 left : '0',
                                 top : '0'
                             },300,false);
                             break;
                         case 'right':
                             $(this).find('.back').eq(0).css({
                                 left : '100%',
                                 top : '0',
                                 display : 'block'
                             }).stop().animate({
                                 left : '0',
                                 top : '0'
                             },300,false);
                             break;
                         case 'top':
                             $(this).find('.back').eq(0).css({
                                 left : '0',
                                 top : '-100%',
                                 display : 'block'
                             }).stop().animate({
                                 left : '0',
                                 top : '0'
                             },300,false);
                             break;
                         case 'bottom':
                             $(this).find('.back').eq(0).css({
                                 left : '0',
                                 top : '100%',
                                 display : 'block'
                             }).stop().animate({
                                 left : '0',
                                 top : '0'
                             },300,false);
                             break;
                         default: break;
                     }
                 });
                 this.box.eq(i).on('mouseleave',function(e){
                     e.stopPropagation();
                     x = e.pageX;
                     y = e.pageY;
                     mouse_pos = {'x': x, 'y': y};
                     var dir = $.get_dir(this,mouse_pos);
                     switch (dir){
                         case 'left':
                             $(this).find('.back').eq(0).stop().animate({
                                 left : '-100%',
                                 top : '0'
                             },300,false);
                             break;
                         case 'right':
                             $(this).find('.back').eq(0).stop().animate({
                                 left : '100%',
                                 top : '0'
                             },300,false);
                             break;
                         case 'top':
                             $(this).find('.back').eq(0).stop().animate({
                                 left : '0',
                                 top : '-100%'
                             },300,false);
                             break;
                         case 'bottom':
                             $(this).find('.back').eq(0).stop().animate({
                                 left : '0',
                                 top : '100%'
                             },300,false);
                             break;
                         default: break;
                     }
                 });

             }
             return this.wrapper;
         }
     };

     $.fn.slideImgShow = function(){
         var containerObj = new ContainerObj(this);
         return containerObj.addSlideEvent();
     }

 })(jQuery,window,document);

 //调用就是这么简单~跟一个JQ的API一样一样的噢~链式操作也是没有断的，还可以进行其他操作！
 $("#my-div").slideImgShow();

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

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