js实现拉幕效果的广告代码

2019-11-20 11:37:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现拉幕效果的广告代码。分享给大家供大家参考。具体如下：

这是一款拉幕效果的广告代码，广告图片像窗帘的幕布一样慢慢的被拉上去了，缩小至一定大小后定格，目前来说，在一些大型的门户网站中仍然可以见到这种效果。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-lm-style-adv-pic-style-codes/

具体代码如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>slide</title><style type="text/css"> html,body{ width:100%; height:100%; margin:0px; border:0px; text-align:center;}div{ margin:auto; overflow:hidden;}</style></head><body><script type="text/javascript"> function tag(obj){ return document.getElementsByTagName(obj)[0];}window.onload=function(){ setTimeout("slideUp();",1000);}function slideUp(){ if(tag("div").offsetHeight>0){  if(tag("div").offsetHeight>10){   tag("div").style.height=tag("div").offsetHeight-10+"px"   setTimeout("slideUp();",20);  }else{   tag("div").style.display="none";   tag("img").src="images/wall8.jpg";   tag("div").style.display="block";   slideDown();  } }}function slideDown(){ if(tag("div").offsetHeight<80){  if(tag("div").offsetHeight<70){   tag("div").style.height=tag("div").offsetHeight+10+"px";   setTimeout("slideDown();",20);  }else{   tag("div").style.height="80px";  } }}</script><div><img src="images/wall8.jpg"></div></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：jquery实现的Banner广告收缩效果代码

下一篇：JS实现弹性漂浮效果的广告代码