创新易联欢迎您!16年高端网站建设品牌

网站顶部的几种JS自动伸缩广告

日期:2014-08-27 | 来源:易联网站建设公司 | 阅读:

*************************************

自动伸缩广告,可设置收缩时间、高度,但无手动打开、关闭设置

*************************************

<script type="text/javascript">

          var intervalId = null;   

          function slideAd(id,nStayTime,sState,nMaxHth,nMinHth){   

            this.stayTime=nStayTime*500 || 3000;   

            this.maxHeigth=nMaxHth || 530;   

            this.minHeigth=nMinHth || 2.5;   

            this.state=sState || "down" ;   

            var obj = document.getElementById(id);   

            if(intervalId != null)window.clearInterval(intervalId);   

            function openBox(){   

                var h = obj.offsetHeight;   

                obj.style.height = ((this.state == "down") ? (h + 9) : (h - 9))+"px";   

                if(obj.offsetHeight>this.maxHeigth){   

                   window.clearInterval(intervalId);   

                   intervalId=window.setInterval(closeBox,this.stayTime);   

                }   

               if (obj.offsetHeight<this.minHeigth){   

                 window.clearInterval(intervalId);   

                obj.style.display="none";   

               }   

           }   

            function closeBox(){   

               slideAd(id,this.stayTime,"up",nMaxHth,nMinHth);   

            }   

           intervalId = window.setInterval(openBox,30);   

        }  

     </script>

    <div id="MyMoveAd" style="background:#ffffff;height:1px;overflow:hidden;">

       <a href="/view/html/tyyc.html" target="_blank"><img src="/AttchMap/31682/aa.jpeg" border="0" width="778px"/></a>

    </div>       

    <script type="text/javascript">    

      slideAd('MyMoveAd',5);   

    </script>

----------------------------------------------- 传说中的分割线 -----------------------------------------------

*************************************

可手动打开的顶部伸缩广告

*************************************

<SCRIPT language=javascript type=text/javascript>

var hmax = 625-1;//最大高度

var hmin = 25;//最小高度

var h=0;

function addCount(){

if(h<hmax){

   h += 20;

   setTimeout("addCount()",1);

}

else {

   h=hmax;

   setTimeout("noneAds()",3000); //停留时间自己适当调整 1000 = 1秒

   document.getElementById("adsOPEN").style.display = "none";

}

document.getElementById("ads").style.display = "";

document.getElementById("ads").style.height = h+"px";

}

window.onload = function showAds(){

document.getElementById("ads").style.display = "none";

document.getElementById("ads").style.height = "0px";

addCount(); //慢慢打开

// h=hmax;

// setTimeout("noneAds()",3000); //停留时间自己适当调整 1000 = 1秒

}

function openAds(){

h = 0;//高度

addCount(); //慢慢打开

}

function noneAds(){

if(h>hmin) {

   h -= 20;

   setTimeout("noneAds()",1);

}

else {

   h = hmin;

   document.getElementById("ads").style.display = "none";

   document.getElementById("adsOPEN").style.display = "";

   return;

}

document.getElementById("ads").style.height = h+"px";

}

</SCRIPT>

<DIV id=ads style="OVERFLOW: hidden; TOP: 0px; TEXT-ALIGN: center;display:none">

<IMG src="http://www.0898hn.net/_temp/ad-index-qunshang.jpg">

</DIV>

<DIV id=adsOPEN style="OVERFLOW: hidden; TEXT-ALIGN: center">

<A href="javascript:openAds()"><IMG src="http://www.0898hn.net/_temp/ad-index-qunshang-open.gif" border=0></A>

</DIV>

----------------------------------------------- 传说中的分割线 -----------------------------------------------

<html>

<head>

<title>伸缩广告条</title>

<script language="javascript" type="text/javascript">

<!--

var checktopAds=false;

function open_chk_show(){

if(!checktopAds){

var anim = function(){

n += 5;

if(n >= 45){

document.getElementById('topAds_chk_show').style.marginTop = "0";

window.clearInterval(t1);

}

else{

document.getElementById('topAds_chk_show').style.marginTop = "-"+(45 - n)+"px";

}

},n=0;

var t1 = window.setInterval(anim,80);

}

}

function close_chk_show(){

var anim = function(){

n += 5;

if(n >= 45){

document.getElementById('topAds_chk_show').style.marginTop = "-45px";

window.clearInterval(t1);

}

else{

document.getElementById('topAds_chk_show').style.marginTop = "-"+ n +"px";

}

},n=0;

var t1 = window.setInterval(anim,80);

}

window.onload=function(){

open_chk_show()

window.setTimeout('close_chk_show()',5000)

}

//-->

</script>

<style type="text/css">

body{margin:0px; text-align:center}

div#topAds_chk_show{margin:auto; overflow:hidden; width:956px;}

img#img_navi01,img#img_navi02{border:0px;height:40px; float:left}

p{font:Arial 14px}

</style>

</head>

<body>

<div id="topAds_chk_show" style="display:block;">

<img id="img_navi01" src="taobao/shou3.gif" style="width:800px;">

<img id="img_navi02" src="taobao/shou4.gif" alt="关闭" style="width:52px; cursor:pointer" onclick="javascript:close_chk_show();">

</div>

<p>5秒后回缩

</body>

</html>


—— 微信公众号 ——

热门标签