来自网易的一个图片文字说明效果

时间：2013-06-04 08:13 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>面向对象的图片描述提示</title>
<style type="text/css"> 

</style>
<script type="text/javascript"> 
function $(id){return typeof id === "string" ? document.getElementById(id) : id;}
function $$(oParent, elem){return (oParent || document).getElementsByTagName(elem);}
function imgLight(id)
{
    this.oDiv=$(id); 
	this.oImg=$$(oDiv,"img");  
	this.oLi=$$(oDiv,"li"); 
	for(var i=0;i<oLi.length;i++)
	{
	    var oThis=oLi[i];
	    oThis.onmouseover=function()
		{
		    var oWidth=$$(this,"img")[0].offsetWidth;
		    var oHeight=$$(this,"img")[0].offsetHeight;
		    this.firstChild.style.width=oWidth+"px";
			this.firstChild.style.height=oHeight+"px";
		    this.firstChild.style.display="block";
		}
		oThis.onmouseout=function()
		{
		    this.firstChild.style.display="none";
		}
		oThis.onclick=function()
		{
		    window.location=$$(this.firstChild,"a")[0].href;
		}
	}
}
window.onload=function()
{
    var newImg=imgLight("show");
}
</script>
</head>
<body>
<div id="show">
  <ul>
    <li><div class="alt"><a href="#"><h3>第一幅</h3><p>美国麦田</p></a></div><img src="http://www.codesocang.com/uploads/allimg/130531/2-1305311I050420-lp.jpg" width="240" height="180" /></li>
  <li><div class="alt"><a href="#"><h3>第二幅</h3><p>日落黄昏</p></a></div><img src="http://www.codesocang.com/uploads/allimg/130528/2-13052Q60934427-lp.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href="#"><h3>第三幅</h3><p>小桥流水人家</p></a></div><img src="http://www.codesocang.com/uploads/allimg/130528/2-13052Q5564J96-lp.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href="#"><h3>第四幅</h3><p>又一幅小桥流水人家</p></a></div><img src="http://www.codesocang.com/uploads/allimg/130531/2-1305311J412I5-lp.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href="#"><h3>第五幅</h3><p>英国巨石阵</p></a></div><img src="http://www.codesocang.com/uploads/allimg/130523/2-13052319521S08-lp.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href="#"><h3>第六幅</h3><p>花园别墅</p></a></div><img src="http://www.codesocang.com/uploads/allimg/130523/2-130523194623111-lp.jpg" width="240" height="180" /></li>
  </ul>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

这是一个来自网易163.com的图片说明效果，鼠标移上后可看到关于图片的描述文字，图片变暗，文字显示，纯原生JS代码实现，基于面向对象的原理来实现，也可以看作是链接特效。来自网易的一个图片文字说明效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/4961.html

来自网易的一个图片文字说明效果

网页特效