jquery圖片網格布局鼠標滑過圖片顯示內容



66 260 87



特效描述:jquery 圖片網格布局 鼠標滑過 圖片顯示內容,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(position.top <= mem_div.height() - pop_info.height()){
					new_top = position.top - 2;
				}
				if(position.top > mem_div.height() - pop_info.height()){
					new_top = position.top - 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.luanup.com/template/luanup2011/images/mempic_02.jpg"/></li>
		<li class="memLI" style="width:50px;">
			<a title="Eric仔" href="http://www.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" target="_blank" class="img"><img width="50" height="50" alt="啵板糖" src="images/76_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" target="_blank" class="img"><img width="50" height="50" alt="電波奶牛" src="images/86_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.cqetom.live/" 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.cqetom.live/" target="_blank" class="img"><img width="50" height="50" alt="喜歡食魚即貓" src="images/99_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.cqetom.live/" 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.cqetom.live/" target="_blank" class="img"><img width="50" height="50" alt="楊嘉傑" src="images/55_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" target="_blank" class="img"><img width="50" height="50" alt="飛機頭系我系我" src="images/81_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" target="_blank" class="img"><img width="50" height="50" alt="哥就是帥" src="images/61_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" 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.cqetom.live/" target="_blank" class="img"><img width="50" height="50" alt="燕然" src="images/22_avatar_small.jpg" /></a>
			<div class="addInfo">
				<a href="http://www.cqetom.live/" 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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片拖動 圖片拖拽 圖片全屏 頭像上傳 圖片上傳 二維碼 圖片放大鏡 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 圖片廣告 圖片收縮展開 圖片收縮 圖片展開 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖標導航 圖標菜單 自動滾動圖片輪播 背景切換 大圖切換 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 滑動星星打分 收縮展開 展開收縮 收縮 展開 圖表 圖片 圖片插件 頭像截圖 其他 文字收縮展開 文字收縮 文字展開 圖片相冊 相冊圖片 圖片滑動 圖片滑塊 圖片網格 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子