显示一个大图广告，过几秒钟缩回去再显示一个小图。怎么实现
日期：2014-05-16 浏览次数：20515 次
显示一个大图广告，过几秒钟缩回去再显示一个小图。如何实现？
有点像咱们现在CSDN这个页面这样(就是这个帖子顶上)，先显示一个大图的广告，延时几秒或者收缩上去，然后重新显示一个小图。
我想要的是像网易印象派那种（http://yxp.163.com/）
------解决方案--------------------
jquery + div吧
动画效果可以用jquery实现，放大缩小用div很简单，弄个setTimeout就可以
------解决方案--------------------
http://bbs.blueidea.com/viewthread.php?tid=2932364&page=1&authorid=498332
看这个
------解决方案--------------------
<body onload="run();">
<div id="box" style="width:900px;margin:0 auto;height:400px;background:#F39;"></div>
<script>
cout = 400 ;
function run(){
var id = document.getElementById('box');
id.style.height = cout +"px";
cout -= 5 ;
if(cout>100){
setTimeout(function(){
run();
},10);
}
}
</script>
------解决方案--------------------
利用setTimeout进行控制
------解决方案--------------------
写了下哦
<!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>
body{}
#big{ width:960px; margin:0px auto;}
#aa{ overflow:hidden;height:408px;}
#bb{ width:100%;height:500px; background:#CCCCCC;}
</style>
<script language="javascript">
function hidden(){
var a=408;
var oheight=document.getElementById("aa");
hide=function (){
if(a>5){
a-=5;
oheight.style.height=a+"px";
}
else{
clearInterval(b);
show=function(){
if(a<46){
oheight.getElementsByTagName("img")[0].src="http://st2.yxp.126.net/img/index/n-p.jpg?v=5242929246100427";
a+=1;
oheight.style.height=a+"px";
}
else
clearInterval(c);
}
var c=setInterval(show,25);
}
}
var b=setInterval(hide,25);
}
</script>
</head>
<body onload="hidden()">
<div id="big">
<div id="aa"><img src="http://st.yxp.126.net/img/index/b-n-p.jpg?v=5242929246100427"></div>
<div id="bb"></div>
</div>
</body>
</html>
有点像咱们现在CSDN这个页面这样(就是这个帖子顶上)，先显示一个大图的广告，延时几秒或者收缩上去，然后重新显示一个小图。
我想要的是像网易印象派那种（http://yxp.163.com/）
------解决方案--------------------
jquery + div吧
动画效果可以用jquery实现，放大缩小用div很简单，弄个setTimeout就可以
------解决方案--------------------
http://bbs.blueidea.com/viewthread.php?tid=2932364&page=1&authorid=498332
看这个
------解决方案--------------------
<body onload="run();">
<div id="box" style="width:900px;margin:0 auto;height:400px;background:#F39;"></div>
<script>
cout = 400 ;
function run(){
var id = document.getElementById('box');
id.style.height = cout +"px";
cout -= 5 ;
if(cout>100){
setTimeout(function(){
run();
},10);
}
}
</script>
------解决方案--------------------
利用setTimeout进行控制
------解决方案--------------------
写了下哦
<!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>
body{}
#big{ width:960px; margin:0px auto;}
#aa{ overflow:hidden;height:408px;}
#bb{ width:100%;height:500px; background:#CCCCCC;}
</style>
<script language="javascript">
function hidden(){
var a=408;
var oheight=document.getElementById("aa");
hide=function (){
if(a>5){
a-=5;
oheight.style.height=a+"px";
}
else{
clearInterval(b);
show=function(){
if(a<46){
oheight.getElementsByTagName("img")[0].src="http://st2.yxp.126.net/img/index/n-p.jpg?v=5242929246100427";
a+=1;
oheight.style.height=a+"px";
}
else
clearInterval(c);
}
var c=setInterval(show,25);
}
}
var b=setInterval(hide,25);
}
</script>
</head>
<body onload="hidden()">
<div id="big">
<div id="aa"><img src="http://st.yxp.126.net/img/index/b-n-p.jpg?v=5242929246100427"></div>
<div id="bb"></div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
