基于jQuery开发的焦点图插件(可下载)
JavaScript
2013-03-11
同事找帮忙需要写一个普通的焦点图,切换效果是渐变,默认不自动切换,图片有小点,点击小点可以切换图片。花了三个多小时写好,贴出来的目的是让那些开发jQuery插件的童鞋做个参考。
下载地址:http://www.qttc.net/static/file/plug/focus/201303_lee_plug.rar
用法:
1、先在页面中加载jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
2、解压插件压缩包后把文件夹上传到站点任意目录、并在页面中载入focus.js,如:
<script type="text/javascript" src="lee_plug/focus.js"></script>
3、使用
如页面元素有:
<div class="demo">
<img src="img/3.jpg" />
<img src="img/1.jpg" />
<img src="img/2.jpg" />
</div>
<div class="demo">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
</div>
使用方法:
$('.demo').lee_focus({'height':400,'width':300});
参数说明:
height 焦点图高度
width 焦点图宽度
demo地址:http://www.qttc.net/static/demo/focus201303/
demo截图:
focus.js源码
/** * 李忠 * 焦点图 * 2013-03-11 */ (function($) { $.fn.lee_focus = function(param){ // 默认高度 var height = param.height || 200; // 默认宽度 var width = param.width || 100; var _this = null; // jQuery的对象选择器是多个,所以这里使用each遍历每一个节点对象 $(this).each(function(){ // 把每一个节点对象赋给一个变量,这有助于程序效率 _this = $(this); $('body').css({'margin':0,'padding':0}); // 改变盒子大小 _this.css({'width':width+'px','height':height+'px','position':'relative','padding':0}); var fock_png_width = 16; // png宽度(px) var fock_png_margin_sx = 8; // png 小图标上下间距(px) var ul_height = fock_png_width+fock_png_margin_sx*2; // 底部黑条的高度(px) var box_height = _this.height(); var box_width = _this.width(); var fock_png_margin_zy = 10; // png 小图标左右间距 var js=document.scripts; var speed = 500; var sper_url = ''; // js路径 var sper_file_name = 'sper.png'; // png 文件名 var last_index = 0; var lock = false; var objImg = _this.find('>img'); // 查找所有图片 if(objImg.length==0){ return false; }else{ var img_length = objImg.length; } // 获取js文件路径 目的是为了使用png图片 for(var i=js.length;i>0;i--){ if(js[i-1].src.indexOf("lee_plug")>-1){ sper_url=js[i-1].src.substring(0,js[i-1].src.lastIndexOf("/")+1)+sper_file_name; } } // 底部黑条 _this.append('<div style="position:absolute;top:'+(height-ul_height)+'px;background:#000;opacity:0.7;height:'+ul_height+'px;margin:0 auto;padding:0;width:100%;"></div>'); // 创建小图标 var html = '<ul style="position:absolute;top:'+(height-ul_height)+'px;height:'+ul_height+'px;margin:0 auto;padding:0;width:100%;opacity:0.7;">'; for(var i=0;i<img_length;i++){ $(objImg[i]).css({'width':'100%','height':'100%','position':'absolute','margin':0,'padding':0}); if(i>=1){ $(objImg[i]).hide(); var sper_weizhi = 0; }else{ var sper_weizhi = '-'+fock_png_width+'px'; } var left = parseInt((box_width - img_length*(fock_png_width+fock_png_margin_zy*2)) /2) + i*(fock_png_width+fock_png_margin_zy); html += '<li style="display:block;position:absolute;width:'+fock_png_width+'px;height:'+fock_png_width+'px;background:url('+sper_url+') 0 '+sper_weizhi+' no-repeat;margin:0; padding:0;cursor:pointer; top:'+parseInt((ul_height-fock_png_width)/2)+'px;left:'+left+'px;"></li>'; } html += '</ul>'; _this.append(html); // 绑定单击事件 _this.find('>ul>li').each(function(i){ // 这里使用的js原生事件绑定,因为jQuery 的 click怎么闭包传入i没有弄明白,所以使用原生函数处理 $(this).get(0).onclick = function(num,obj){ return function(){ if(num==last_index || lock){ return false; } lock = true; obj.find('>ul>li').each(function(i){ $(this).css('background','url('+sper_url+') 0 0 no-repeat'); }); obj.find('>ul>li:eq('+num+')').css('background','url('+sper_url+') 0 -'+fock_png_width+'px no-repeat'); obj.find('>img:visible').fadeOut(speed); obj.find('>img:eq('+num+')').fadeIn(speed,function(){ lock = false; last_index = num; }); } }(i,_this); }); }); }; })(jQuery);
乳名?小名?昵称?网名?均可
email,放心,我不会给你乱投广告的
想获得回访就把你的站点URL写上(没有留空)
[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法