个人学习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插件教程，受益匪浅！