首页 > 代码库 > 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果
个人学习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插件教程，受益匪浅！
个人学习JQ插件编写成果：little酷炫的图片滑动切换效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。