用css和jquery生成图像字幕

2015-03-02 20:14:59  访问(1958) 赞(0) 踩(0)

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>用css和jquery生成图像字幕.</title>
<SCRIPT LANGUAGE="JavaScript" src="<%=jQuery%>"></SCRIPT>
<script type="text/javascript">
$(document).ready(function(){
	$('img.captioned').each(
		function() {
			var caption = $(this).attr('title');
			$(this).wrap('<div class="imgcontainer"></div>')
			.after('<div class="caption">'+caption+'</div>');
		}
	);
	

});
</script>

<style type="text/css">
h1	{font:bold 1.2em/1.6em arial;}

img
{
width:100px;
height:60px;
}

.imgcontainer {
	position:relative;
	float:left;
	}
.caption {
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
	background:#eee;
	width:100%;
	opacity:.70;
	filter:alpha(opacity=80);
	color:#000;
	}
.imgcontainer img {display:block;}
</style>

<%=VersionHideInfo%>
</head>
<body>
<h1>用css和jquery生成图像字幕.</h1>

<img src="<%=strWebPhyPath%>/images/js/pic1.png"   title="this is slowx.cn logo!" />



<img src="<%=strWebPhyPath%>/images/js/pic2.png"  title="this is slowx.cn jquery logo!" />


<img src="<%=strWebPhyPath%>/images/js/pic3.png"  title="this is slowx.cn json logo!" />


<br><br><br>
对比: 
<br><br><br>


<img src="<%=strWebPhyPath%>/images/js/pic1.png" class="captioned"  title="this is slowx.cn logo!" />



<img src="<%=strWebPhyPath%>/images/js/pic2.png" class="captioned"  title="this is slowx.cn jquery logo!" />


<img src="<%=strWebPhyPath%>/images/js/pic3.png" class="captioned"  title="this is slowx.cn json logo!" />
</body>
</html>


上一条：

下一条：


 

相关评论

评论加载中……
 

发表评论

类型：
内容：
  (Alt+Enter)
 
  ┈全部┈  
 
（显示默认分类）