大小图缩放头部广告，利用JS控制Cookies关闭不再显示 

<!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=utf-8" />
<title>头部广告</title>
<style>
a.close{ display:block; width:16px; height:16px; background:url(images/close.jpg) no-repeat; position:absolute; top:6px; right:6px;}
#smallads{ width:960px; margin:0 auto; position:relative; display:none;}
#ads{margin:auto;width:960px; top:0px; height:0px;overflow:hidden; text-align:center;}
</style>
<script src="ad.js"></script>
</head>
<body>
    <div id="ads">
    <a href="#"><img src="images/big_yuandan.jpg" width="960" height="300"/></a>
    </div>    
    <div id="smallads">
    <a href="#"><img src="images/sm_yuandan.jpg"width="960" height="60"/></a>
<a href="#" class="close" onclick="clickclose()"></a>
    </div>
    
    <div style="background:#000; width:1000px; height:30px;">内容</div>
</body>
</html>
// JavaScript Document
 var time = 1000;
    var h = 0;
    function addCount()
    {
        if(time>0)
        {
            time--;
            h = h+5;
        }
        else
        {
            return;
        }
        if(h>300)  //高度
        {
            return;
        }
        document.getElementById("ads").style.display = "";
        document.getElementById("ads").style.height = h+"px";
        setTimeout("addCount()",1); 
    }
    
   function showAds()
    {
        addCount();
        setTimeout("noneAds()",6000); //停留时间自己适当调整
    }

    var T = 300;
    var N = 240; //高度
    function noneAds()
    {
        if(T>0)
        {
            T--;
            N = N-5;
        }
        else
        {
            return;
        }
        if(N<60)
        {
            document.getElementById("ads").style.display = "none";
            document.getElementById("smallads").style.display = "block";
            return;
        }
        
        document.getElementById("ads").style.height = N+"px";
        setTimeout("noneAds()",1); 
    }
    
    
//取得cookie     
function getCookie(name) {    
 var nameEQ = name + "=";    
 var ca = document.cookie.split(';');    //把cookie分割成组     
 for(var i=0;i < ca.length;i++) {    
 var c = ca[i];                      //取得字符串     
 while (c.charAt(0)==' ') {          //判断一下字符串有没有前导空格     
 c = c.substring(1,c.length);      //有的话，从第二位开始取     
 }    
 if (c.indexOf(nameEQ) == 0) {       //如果含有我们要的name     
 return unescape(c.substring(nameEQ.length,c.length));    //解码并截取我们要值     
 }    
 }    
 return false;    
}        
//设置cookie     
function setCookie(name, value, seconds) {    
 seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，这个根php不一样。     
 var expires = "";    
 if (seconds != 0 ) {      //设置cookie生存时间     
 var date = new Date();    
 date.setTime(date.getTime()+(seconds*1000));    
 expires = "; expires="+date.toGMTString();    
 }    
 document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值     
}     
    
function clickclose(){
var smallads=document.getElementById("smallads").style.display="none";
var ads=document.getElementById("ads").style.display="none";
setCookie("ads","no",0);
}
function checkads(){
if(getCookie("ads")=="no"){
var smallads=document.getElementById("smallads").style.display="none";
var ads=document.getElementById("ads").style.display="none";
}else{
var smallads=document.getElementById("smallads").style.display="";
var ads=document.getElementById("ads").style.display="";
showAds();
}
}
window.onload=checkads;

 谷歌之类的浏览器要放到空间才可以测试cookie效果哦~

posted @ 2012-12-27 22:13  tinyphp  Views(575)  Comments(0)  Edit  收藏  举报