个人学习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: 0;
padding: 0;
}
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: 0;
top: 0;
}
.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插件教程，受益匪浅！