超棒的javascript页面顶部卷动广告效果

2019-11-21 01:51:32

字体：大中小

来源：转载

供稿：网友

前言

这篇文章主要介绍了关于利用javascript实现的超棒的页面顶部卷动广告效果，主要通过控制图片外层div来实现的，下面话不多说了，来一起看看详细的介绍吧。

实例代码：

<!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"> <!-- body { margin:0;background:#000; } img { border:0; } --> </style> <script type="text/javascript"> <!-- var nowheight=0;  //初始广告层高度 var maxheight=224;  //广告层最大高度 var adobj; var opendiv; var closdiv; var addfunc; var handobj; var reducefunc;     var speed=7;    //层卷动速度 function showtopad() {   adobj=document.getElementById("bigad");   opendiv=document.getElementById("opendiv");   closdiv=document.getElementById("closdiv");   if (nowheight<=0) {     opendiv.style.display="none";     adobj.style.display="block";     addfunc=setInterval("addheight()",1);   } } function closetopad() {   if (nowheight>0) {     callreduceheight();     if (typeof(handobj)=="number") {       clearTimeout(handobj);     }   } } function addheight() {   nowheight+=speed;   if (nowheight>maxheight) {     clearInterval(addfunc);     closdiv.style.top=maxheight-30;     closdiv.style.display="block";     handobj=setTimeout("callreduceheight()",6000);     return;   }   adobj.style.height=nowheight+"px"; } function callreduceheight() {   closdiv.style.display="none";   reducefunc=setInterval("reduceheight()",1); } function reduceheight() {   adobj.style.height=nowheight+"px";   nowheight-=speed;   if (nowheight<=0) {     clearInterval(reducefunc);     adobj.style.display="none";     opendiv.style.display="block";     return;   } } //--> </script> </head><body>  <div id="opendiv" style="position:absolute;top:3px;right:3px;z-index:10;padding:3px;border:1px #000 solid; cursor:hand;background:#fff;"><span onclick="showtopad()">打开</span></div>   <div id="closdiv" style="position:absolute;right:4px;z-index:10;padding:3px;border:1px #000 solid;display:none;cursor:hand;background:#fff;"><span onclick="closetopad()">关闭</span></div>      <div id="bigad" style="width:1003px;height:0;overflow:hidden;display:none;">     <a href="//www.VeVB.COm/" target="_blank">       <img src="//www.VeVB.COm/upload/20071201215241934.jpg">     </a>   </div>   <p style="margin:5px;text-align:center;font-weight:bold;font-size:14px;color:#fff;">     上面是广告，你可以点击看看效果！^_^   </p> </body></html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：firefox浏览器下javascript 拖动层效果与原理分析代码

下一篇：javascript下拉框不被选中大类的区别方法