在图片下显示div
日期：2014-05-16 浏览次数：20468 次
在图片上显示div
在DataList中绑定图片，当鼠标放图片上时显示一个div关于这张图片的详细信息，这个div显示的范围只能在图片的区域内，鼠标离开时，层就隐藏。请问这样的js该怎么写？哪位朋友提供一些源代码了，在网上没搜到类似代码。
------解决方案--------------------
樓主試試看:
<!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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title></title>
<style>
body{margin:0; padding:0; font-size:14px; background:#fff; color:#000; font-family:simsun, arial; text-align:center; }
div,ul,ol,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:0;}
li {list-style-type:none;}
h1,h2,h3,h4,h5,input{margin:0; padding:0; letter-spacing:1px;}
table,tr,td,th{font-size:12px;}
a{color:#000; text-decoration:none;}
a:hover{color:#f60; text-decoration:underline;}
dl{ width:304px; height:210px; float:left; display:inline; margin:50px 0 0 30%; background:#ccc}
dt{ position:relative; height:184px; overflow:hidden;}
dt label{ position:absolute; left:2px; bottom:-20px; width:300px; line-height:20px; height:20px; color:#fff; text-align:left; font-size:12px; background-color:#000; filter:alpha(opacity=70);opacity:0.7!important; overflow:hidden;}
dt label a{ color:#fff;}
dt label em{ font-style:normal; float:right; padding-right:5px;}
dt label span{ padding:0 5px;}
dt img{ width:300px; height:180px; padding:1px; border:1px solid #d1d1d1;}
dd{ line-height:26px; height:26px; overflow:hidden;}
dd span{ float:right; font-size:12px;}
dd span a{ color:#090;}
</style>
<script>
function css(who,key){
// who 某个节点对象
// key CSS的属性名称
if(who.style[key]!='')return who.style[key];
if(!!window.ActiveXObject)return who.currentStyle[key];
return document.defaultView.getComputedStyle(who,"")
.getPropertyValue(key.replace(/([A-Z])/g,"-$1").toLowerCase());
}
function move(who,attr,val,s,act){
// who 节点
// attr CSS属性
// val CSS属性的最终值
// s 间隔时间（毫秒）
// act 代表显示或隐藏
var nonceAttr = parseInt(css(who,attr));
var k = 0;
var moveTile = null;
function count() {
if (nonceAttr != val){
if (act == "show"){nonceAttr++}else{nonceAttr--};
who.style[attr] = nonceAttr +"px";
moveTile = setTimeout(count,s);
}
}
count();
}
</script>
</head>
<body>
<dl>
<dt>
<a href="#"><img src="http://www.china.com/zh_cn/tu_image/356top_1185_datu-2.jpg" /></a>
<label>111111111</label>
</dt>
<dd><a href="#">信息标题</a></dd>
</dl>
<dl>
<dt>
<a href="#"><img src="http://www.china.com/zh_cn/tu_image/356top_1185_datu-2.jpg" /></a>
<label>222222222</label>
</dt>
<dd><a href="#">信息标题</a></dd>
</dl>
<script>
var dl = document.getElementsByTagName("dl");
for( var i=0; i<dl.length; i++){
dl[i].onmouseover = function(){
clearTimeout(this.fx);
var label = this.getElementsByTagName("label");
move(label[0],"bottom",2,13,"show");
}
dl[i].onmouseout = function(){
var label = this.getElementsByTagName("label");
this.fx=setTimeout(function (){
move(
在DataList中绑定图片，当鼠标放图片上时显示一个div关于这张图片的详细信息，这个div显示的范围只能在图片的区域内，鼠标离开时，层就隐藏。请问这样的js该怎么写？哪位朋友提供一些源代码了，在网上没搜到类似代码。
------解决方案--------------------
樓主試試看:
<!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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title></title>
<style>
body{margin:0; padding:0; font-size:14px; background:#fff; color:#000; font-family:simsun, arial; text-align:center; }
div,ul,ol,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:0;}
li {list-style-type:none;}
h1,h2,h3,h4,h5,input{margin:0; padding:0; letter-spacing:1px;}
table,tr,td,th{font-size:12px;}
a{color:#000; text-decoration:none;}
a:hover{color:#f60; text-decoration:underline;}
dl{ width:304px; height:210px; float:left; display:inline; margin:50px 0 0 30%; background:#ccc}
dt{ position:relative; height:184px; overflow:hidden;}
dt label{ position:absolute; left:2px; bottom:-20px; width:300px; line-height:20px; height:20px; color:#fff; text-align:left; font-size:12px; background-color:#000; filter:alpha(opacity=70);opacity:0.7!important; overflow:hidden;}
dt label a{ color:#fff;}
dt label em{ font-style:normal; float:right; padding-right:5px;}
dt label span{ padding:0 5px;}
dt img{ width:300px; height:180px; padding:1px; border:1px solid #d1d1d1;}
dd{ line-height:26px; height:26px; overflow:hidden;}
dd span{ float:right; font-size:12px;}
dd span a{ color:#090;}
</style>
<script>
function css(who,key){
// who 某个节点对象
// key CSS的属性名称
if(who.style[key]!='')return who.style[key];
if(!!window.ActiveXObject)return who.currentStyle[key];
return document.defaultView.getComputedStyle(who,"")
.getPropertyValue(key.replace(/([A-Z])/g,"-$1").toLowerCase());
}
function move(who,attr,val,s,act){
// who 节点
// attr CSS属性
// val CSS属性的最终值
// s 间隔时间（毫秒）
// act 代表显示或隐藏
var nonceAttr = parseInt(css(who,attr));
var k = 0;
var moveTile = null;
function count() {
if (nonceAttr != val){
if (act == "show"){nonceAttr++}else{nonceAttr--};
who.style[attr] = nonceAttr +"px";
moveTile = setTimeout(count,s);
}
}
count();
}
</script>
</head>
<body>
<dl>
<dt>
<a href="#"><img src="http://www.china.com/zh_cn/tu_image/356top_1185_datu-2.jpg" /></a>
<label>111111111</label>
</dt>
<dd><a href="#">信息标题</a></dd>
</dl>
<dl>
<dt>
<a href="#"><img src="http://www.china.com/zh_cn/tu_image/356top_1185_datu-2.jpg" /></a>
<label>222222222</label>
</dt>
<dd><a href="#">信息标题</a></dd>
</dl>
<script>
var dl = document.getElementsByTagName("dl");
for( var i=0; i<dl.length; i++){
dl[i].onmouseover = function(){
clearTimeout(this.fx);
var label = this.getElementsByTagName("label");
move(label[0],"bottom",2,13,"show");
}
dl[i].onmouseout = function(){
var label = this.getElementsByTagName("label");
this.fx=setTimeout(function (){
move(
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
