基于jQuery开发的焦点图插件(可下载)

JavaScript 2013-03-11 jQuery,焦点图,插件

同事找帮忙需要写一个普通的焦点图,切换效果是渐变,默认不自动切换,图片有小点,点击小点可以切换图片。花了三个多小时写好,贴出来的目的是让那些开发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);

文字链接:《基于jQuery开发的焦点图插件(可下载)

文章地址:http://www.qttc.net/201303287.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1

  • 过来支持了,代码先保存下来,之后慢慢看。PS,可以多做点切换的效果。特别是最好能运用一下视差滚动,这个效果很不错。http://tympanus.net/Tutorials/ParallaxSlider/
    2013-03-11 20:52:10 [ 跟帖 ]
    1 #