像这种效果:http://abduzeedo.com/tags/photography
crying_boy帮忙写了段JS,可以实现鼠标移上图片可以实现内容在图片上,请问,如果要像此网站一样让内容缓慢出现,应该如何做,谢谢!这是crying_boy朋友写的:
<!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">
#imglist div{width:192px; height:192px; position:relative;}
#imglist div span{font-size:18px; background-image:url(a2.png);width:192px; height:18px; text-align:center; float:left;position:absolute;display:none;left:0;bottom:0;}
</style>
<script type="text/javascript">
window.onload=function(){
var imgs=document.getElementById("imglist").getElementsByTagName("div");
for(i=0;i<imgs.length;i++)
{
imgs[i].onmouseover=function(){
this.getElementsByTagName("span")[0].style.display='block';
};
imgs[i].onmouseout=function(){
this.getElementsByTagName("span")[0].style.display='none';
}
}
}</script>
</head>
<body>
<div id="imglist">
<div><img src="show3.jpg"/><span>11111111111111111111</span></div>
<div><img src="show1b.jpg"/><span>2222222222222222222</span></div>
</div>
</body>
</html>
crying_boy帮忙写了段JS,可以实现鼠标移上图片可以实现内容在图片上,请问,如果要像此网站一样让内容缓慢出现,应该如何做,谢谢!这是crying_boy朋友写的:
<!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">
#imglist div{width:192px; height:192px; position:relative;}
#imglist div span{font-size:18px; background-image:url(a2.png);width:192px; height:18px; text-align:center; float:left;position:absolute;display:none;left:0;bottom:0;}
</style>
<script type="text/javascript">
window.onload=function(){
var imgs=document.getElementById("imglist").getElementsByTagName("div");
for(i=0;i<imgs.length;i++)
{
imgs[i].onmouseover=function(){
this.getElementsByTagName("span")[0].style.display='block';
};
imgs[i].onmouseout=function(){
this.getElementsByTagName("span")[0].style.display='none';
}
}
}</script>
</head>
<body>
<div id="imglist">
<div><img src="show3.jpg"/><span>11111111111111111111</span></div>
<div><img src="show1b.jpg"/><span>2222222222222222222</span></div>
</div>
</body>
</html>
http://help.dili360.com/js/sliderFadeInOut.shtml
<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">
#imglist{float:left;width:500px;height:100px}
#imglist ul{float:left;width:500px; list-style:none;height:100px;}
#imglist ul li{float:left;width:200px;height:100px;position:relative; overflow:hidden;}
#imglist ul li img{float:left;width:200px;height:100px;}
#imglist ul li span{float:left;width:200px;position:absolute;display:none; font-family:Arial; font-size:9px;left:0;bottom:0;}
</style>
<script type="text/javascript">
/*
a:要显示的对象
b:a对应的图片的高度
c:要显示对象的高度
d:a移动的速度,毫秒为单位
e:a每次的移动量
*/
function slideUp(a,b,c,d,e){
var minTop=parseInt(b)-parseInt(c);
if(parseInt(a.style.top)<minTop){return;}
a.style.top=(parseInt(a.style.top)-parseInt(e))+"px";
setTimeout(function (){slideUp(a,b,c,d,e)},d)
}
window.onload=function(){
var imgs=document.getElementById("imglist").getElementsByTagName("li");
for(i=0;i<imgs.length;i++){
imgs[i].onmouseover=function(){
var _span=this.getElementsByTagName("span")[0];
var imgheight=this.clientHeight;
_span.style.display='block';
var _spanH=_span.clientHeight;
_span.style.top=imgheight+"px";
setTimeout(function (){slideUp(_span,imgheight,_spanH,200,3)},200)
};
imgs[i].onmouseout=function(){
this.getElementsByTagName("span")[0].style.display='none';
}
}
}</script>
</head>
<body>
<div id="imglist">
<ul>
<li><img src="1.gif"/><span>1111111111111111111111111111111</span></li>
<li><img src="1.gif"/><span>2222222222222222222222222222222</span></li>
</ul>
</div>
</body>
</html>
<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">
#imglist{float:left;width:500px;height:100px}
#imglist ul{float:left;width:500px; list-style:none;height:100px;}
#imglist ul li{float:left;width:200px;height:100px;position:relative; overflow:hidden;}
#imglist ul li img{float:left;width:200px;height:100px;}
#imglist ul li span{float:left;width:200px;position:absolute;display:none; font-family:Arial; font-size:9px;left:0;bottom:0;}
</style>
<script type="text/javascript">
/*
a:要显示的对象
b:a对应的图片的高度
c:要显示对象的高度
d:a移动的速度,毫秒为单位
e:a每次的移动量
*/
function slideUp(a,b,c,d,e){
var minTop=parseInt(b)-parseInt(c);
if(parseInt(a.style.top)<minTop){return;}
a.style.top=(parseInt(a.style.top)-parseInt(e))+"px";
setTimeout(function (){slideUp(a,b,c,d,e)},d)
}
function bindList(){
var imgs=document.getElementById("imglist").getElementsByTagName("li");
for(i=0;i<imgs.length;i++){
imgs[i].onmouseover=function(){
var _span=this.getElementsByTagName("span")[0];
var imgheight=this.clientHeight;
_span.style.display='block';
var _spanH=_span.clientHeight;
_span.style.height=_spanH+"px";
_span.style.top=imgheight+"px";
setTimeout(function (){slideUp(_span,imgheight,_spanH,200,3)},200)
};
imgs[i].onmouseout=function(){
var _span=this.getElementsByTagName("span")[0];
this.getElementsByTagName("span")[0].style.display='none';
}
}
}
window.onload=function(){
bindList();
}</script>
</head>
<body>
<div id="imglist">
<ul>
<li><img src="1.gif"/><span>1111111111111111111111111111111</span></li>
<li><img src="1.gif"/><span>2222222222222222222222222222222</span></li>
</ul>
</div>
</body>
</html>
var _span=this.getElementsByTagName("span")[0];//这句可以删除,我忘了删了
this.getElementsByTagName("span")[0].style.display='none';
}
不过还是很谢谢你,这么热心帮忙 ,多谢
不过还是很谢谢你,这么热心帮忙 ,多谢