純CSS實(shí)現(xiàn)鼠標(biāo)移上圖片添加陰影效果

2009-12-31 圖片特效 ℃

<p><style type="text/css">
*{padding:0;margin:0;}
body{background:#E8EDF1;padding:20px;}
#profileAvatar {overflow:hidden;zoom:1;}
#profileAvatar i{float:left;visibility:hidden;background:url(http://zlcool.com/jscss/demoimg/200912/avatar.gif) 0 0 no-repeat;}
#profileAvatar i i{background-position:100% 0; }
#profileAvatar i i i{background-position:0 100%;}
#profileAvatar i i i i{padding:0 5px 6px 0;background-position:100% 100%; }
#profileAvatar  img{visibility:visible;display:block;padding:3px;border:1px solid #ccc;background:#fff;}</style></p>
<div   class="psy99w4"   id="profileAvatar"><i><i><i><i><a href="http://well-network.com"><img id="image" alt="" width="180" onmouseout="show()" onmouseover="show()" src="/images/tx/s1.jpg" /></a> </i></i></i></i></div>
<p>鼠標(biāo)移上去顯示圓滑的陰影 <br />
<br />
<input type="button" onclick="document.getElementById('image').width -=10;" value="縮小圖片" /> <script type="text/javascript">
	var imgBg=document.getElementById('profileAvatar').getElementsByTagName('i')
	function show(){
		for(i=0;i<imgBg.length;i++)
		{	
			if(imgBg[i].style.visibility=='visible')
			imgBg[i].style.visibility='hidden';
			else
			imgBg[i].style.visibility='visible'
		}
	}
</script></p>

相關(guān)特效代碼

熱門特效代碼: js圖片自動切換代碼; CSS實(shí)現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片; JS圖片切換效果; 飄動圖片廣告代碼; 鼠標(biāo)經(jīng)過圖片變大; 簡單高效的javascript 幻燈片播放; JavaScript封裝的平滑圖片滾動，; 點(diǎn)擊圖片出現(xiàn)大圖; 圖片局部放大效果特效; 圖片上下左右拉伸效果特效

推薦特效代碼: 點(diǎn)擊按鈕淡入淡出彈出圖文信息; 探照燈效果圖片特效代碼; 簡單高效的javascript 幻燈片播放; 飄動圖片廣告代碼; JavaScript封裝的平滑圖片滾動，; 超酷超絢精美圖片展示效果代碼