jquery图片墙多张小图片集合图片墙排列布局插件


jquery图片墙多张小图片集合图片墙排列布局插件
jquery图片墙多张小图片集合图片墙排列布局插件以及图片墙排列布局等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/*memberShow*/
.memberShow{width:459px;height:152px;position:relative;margin:20px auto;}
.memberShow li{float:left;overflow:hidden;margin:0 1px 1px 0;}
.memberShow li.upPic{width:101px;height:101px;}
.memberShow li.memLI{height:50px;}
.memberShow .popInfo{display:none;position:absolute;top:0;left:0;z-index:10;padding:2px;background:#ff6600;width:203px;height:50px;overflow:hidden;}
.memberShow .popInfo img{width:50px;position:relative;z-index:3;}
.memberShow .popInfo p{width:130px;padding:0 10px;height:50px;line-height:24px;color:#fff;position:relative;z-index:2;overflow:hidden;}
.memberShow .layerMode{display:none;position:absolute;background:#000;filter:Alpha(Opacity=50);opacity:0.5;top:0;left:0;width:100%;height:152px;z-index:3;}
.memberShow .imgShadow1{
	-moz-box-shadow:2px 0px 2px #9f9f9f;
    -webkit-box-shadow:2px 0px 2px #9f9f9f;
    box-shadow:2px 0px 2px #9f9f9f;
	/* For IE 8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#5f5f5f')";
    /* For IE 5.5 - 7 */
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#5f5f5f');
}
.memberShow .imgShadow2{
	-moz-box-shadow:-2px 0px 2px #9f9f9f;
    -webkit-box-shadow:-2px 0px 2px #9f9f9f;
    box-shadow:-2px 0px 2px #9f9f9f;
	/* For IE 8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=270, Color='#5f5f5f')";
    /* For IE 5.5 - 7 */
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=270, Color='#5f5f5f');
}
</style>
<script type="text/javascript">
/*会员图片墙*/
var memberShow = function(val){
	var mem_div = $("."+val);
	var memli = mem_div.find("li.memLI");
	var mem_len = memli.length;
	var pop_info = mem_div.find(".popInfo");
	var layer_Mode = mem_div.find(".layerMode");
	var thumb1 = [];//缓存数组
	var thumb2 = [];//缓存数组
	var init_left,init_top;
	var hovertime;
	/*图片位置随机显示*/
	function imgRand(){
		//随机生成条目,加载随机的样式,插入dom里面,先隐藏
		for(var i = 0; i<mem_len; i++){
			thumb1[i] = i;
			thumb2[i] = i;
		}
		var thumb1_len = thumb1.length;
		var thumb2_len = thumb2.length;
		var index = 0;
		(function(){
			if(index >= mem_len){
				return;
			}
			var s_index = parseInt(Math.random()*thumb2_len);	//显示随机数
			memli.eq(thumb2[s_index]).css('visibility','visible');
			thumb2.splice(s_index,1);
			thumb2_len--;
			index++;
			window.setTimeout(arguments.callee,50);
		})();
	}
	imgRand();
	memli.bind({
		mouseover : function(){
			THIS = $(this);
			hovertime = setTimeout(function(){
				pop_info.css({"display":"block"});
				var addinfo = THIS.find(".addInfo").html();
				pop_info.html(addinfo);
				var position = THIS.position();
				var new_left,new_top;
				var cssShadow;
				var _margin;
				if(position.left <= mem_div.width() - pop_info.width()){
					new_left = position.left -2;
					cssShadow = "imgShadow1";
					_margin = "left";
					pop_info.find("img").css("float","left");
					pop_info.find("p").css({"float":"left","margin-left":"-50px"});
				}
				if(position.left > mem_div.width() - pop_info.width()){
					new_left = position.left - THIS.width()*3 -5;
					cssShadow = "imgShadow2";
					_margin = "right";
					pop_info.find("img").css("float","right");
					pop_info.find("p").css({"float":"right","margin-right":"-50px","text-align":"right"});
				}
				if(51qianduan.com <= mem_div.height() - pop_info.height()){
					new_top = 51qianduan.com - 2;
				}
				if(51qianduan.com > mem_div.height() - pop_info.height()){
					new_top = 51qianduan.com - THIS.height()*2 - 4;	
				}
				pop_info.css({"top":new_top,"left":new_left});
				pop_info.find("img").addClass(cssShadow);
				if(_margin == "left"){
					pop_info.find("p").animate({			   
						marginLeft: "0px"					   
					},
					300
					);	
				}
				else if(_margin == "right"){
					pop_info.find("p").animate({			   
						marginRight: "0px"
					},
					300
					);		
				}
				layer_Mode.fadeTo("fast", 0.6);
			},300);
		},
		mouseout: function(){
			clearTimeout(hovertime);
		}
	})
	pop_info.bind('mouseout',function(){
		layer_Mode.css({"display":"none"});
		pop_info.css({"display":"none","top":0,"left":0});
		pop_info.html("");
	})
}
$(document).ready(function(){
	memberShow("memberShow");
})
</script>
<div class="memberShow">
	<ul>
		<li class="upPic"><img src="http://img.51qianduan.com/template/luanup2011/images/mempic_02.jpg"/></li>
		<li class="memLI" style="width:50px;">
			<a title="Eric仔" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="Eric仔" src="images/39_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="Eric仔" target="_blank"><img src="images/39_avatar_small.jpg" width="50" height="50" /></a>
				<p>Eric仔<br />广州五中<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="love瑶" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="love瑶" src="images/81_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="love瑶" target="_blank"><img src="images/81_avatar_small.jpg" width="50" height="50" /></a>
				<p>love瑶<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="Roy_Chan2011" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="Roy_Chan2011" src="images/09_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="Roy_Chan2011" target="_blank"><img src="images/09_avatar_small.jpg" width="50" height="50" /></a>
				<p>Roy_Chan2011<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="既BT且放纵嘎L君" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="既BT且放纵嘎L君" src="images/20_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="既BT且放纵嘎L君" target="_blank"><img src="images/20_avatar_small.jpg" width="50" height="50" /></a>
				<p>既BT且放纵嘎L君<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="Sugar-陈锐芳" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="Sugar-陈锐芳" src="images/00_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="Sugar-陈锐芳" target="_blank"><img src="images/00_avatar_small.jpg" width="50" height="50" /></a>
				<p>Sugar-陈锐芳<br />芳芳家族<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="Mo3o_Kwok" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="Mo3o_Kwok" src="images/60_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="Mo3o_Kwok" target="_blank"><img src="images/60_avatar_small.jpg" width="50" height="50" /></a>
				<p>Mo3o_Kwok<br />广东白云学院<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="luanup" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="luanup" src="images/36_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="luanup" target="_blank"><img src="images/36_avatar_small.jpg" width="50" height="50" /></a>
				<p>luanup<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="啵板糖" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="啵板糖" src="images/76_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="啵板糖" target="_blank"><img src="images/76_avatar_small.jpg" width="50" height="50" /></a>
				<p>啵板糖<br />芳芳家族<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="___patch" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="___patch" src="images/33_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="___patch" target="_blank"><img src="images/33_avatar_small.jpg" width="50" height="50" /></a>
				<p>___patch<br />广州科技职业技术学院<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="LeMonTea" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="LeMonTea" src="images/21_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="LeMonTea" target="_blank"><img src="images/21_avatar_small.jpg" width="50" height="50" /></a>
				<p>LeMonTea<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="电波奶牛" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="电波奶牛" src="images/86_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="电波奶牛" target="_blank"><img src="images/86_avatar_small.jpg" width="50" height="50" /></a>
				<p>电波奶牛<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="喜欢食鱼即猫" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="喜欢食鱼即猫" src="images/99_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="喜欢食鱼即猫" target="_blank"><img src="images/99_avatar_small.jpg" width="50" height="50" /></a>
				<p>喜欢食鱼即猫<br />广大<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="楊嘉傑" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="楊嘉傑" src="images/55_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="楊嘉傑" target="_blank"><img src="images/55_avatar_small.jpg" width="50" height="50" /></a>
				<p>楊嘉傑<br />-----保密-----<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="nafeeldu" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="nafeeldu" src="images/84_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="nafeeldu" target="_blank"><img src="images/84_avatar_small.jpg" width="50" height="50" /></a>
				<p>nafeeldu<br />广州电视广播大学<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="Helen敏叔叔" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="Helen敏叔叔" src="images/97_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="Helen敏叔叔" target="_blank"><img src="images/97_avatar_small.jpg" width="50" height="50" /></a>
				<p>Helen敏叔叔<br />新华中学<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="peter-明少" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="peter-明少" src="images/12_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="peter-明少" target="_blank"><img src="images/12_avatar_small.jpg" width="50" height="50" /></a>
				<p>peter-明少<br />广州市广播电视大学<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="恢絔_LHM" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="恢絔_LHM" src="images/16_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="恢絔_LHM" target="_blank"><img src="images/16_avatar_small.jpg" width="50" height="50" /></a>
				<p>恢絔_LHM<br />广州广播电视大学<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="飞机头系我系我" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="飞机头系我系我" src="images/81_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="飞机头系我系我" target="_blank"><img src="images/81_avatar_small.jpg" width="50" height="50" /></a>
				<p>飞机头系我系我<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="_Mr-BozI_" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="_Mr-BozI_" src="images/05_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="_Mr-BozI_" target="_blank"><img src="images/05_avatar_small.jpg" width="50" height="50" /></a>
				<p>_Mr-BozI_<br />广东培正学院<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="voice" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="voice" src="images/47_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="voice" target="_blank"><img src="images/47_avatar_small.jpg" width="50" height="50" /></a>
				<p>voice<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="哥就是帅" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="哥就是帅" src="images/61_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="哥就是帅" target="_blank"><img src="images/61_avatar_small.jpg" width="50" height="50" /></a>
				<p>哥就是帅<br />轻工<br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="cc君" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="cc君" src="images/66_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="cc君" target="_blank"><img src="images/66_avatar_small.jpg" width="50" height="50" /></a>
				<p>cc君<br /><br/></p>
			</div>
		</li>
		<li class="memLI" style="width:50px;">
			<a title="燕然" href="http://www.51qianduan.com/" target="_blank" class="img"><img width="50" height="50" alt="燕然" src="images/22_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.51qianduan.com/" title="燕然" target="_blank"><img src="images/22_avatar_small.jpg" width="50" height="50" /></a>
				<p>燕然<br /><br/></p>
			</div>
		</li>
	</ul>
	<div class="popInfo"></div>
	<div class="layerMode"></div>
</div>

相关推荐

发表评论

相关文章