伸缩广告（大图收缩起来变小图）的实现代码

当前位置：洪哥笔记 > DHTML > 伸缩广告（大图收缩起来变小图）的实现代码

关键词

javascript 伸缩广告

摘要

本文介绍一个伸缩广告的JavaScript脚本代码，使用了jquery库，实现广告由一个大图片收缩变成一张小图片。

直接上代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery伸缩广告</title>
<style type="text/css">img{border:0}</style>
<script src="js/jquery.js" type="text/javascript"></script>
</head>

<body style="text-align:center">

<script>
// JScript 文件
function TopAd()
{
    var strTopAd="";

   //定义小图片内容
    var topSmallBanner="<div><a href=\"http://sc.chinaz.com/\" target=_blank><img src=\"images/top_090901_s.gif\" /></a></div>";

   //判断在那些页面上显示大图变小图效果，非这些地址只显示小图（或FLASH）
    if (location == "http://sc.chinaz.com" || location == "http://sc.chinaz.com" || location == "http://sc.chinaz.com/" || true)
    {
       //定义大图内容
        strTopAd="<div id=adimage style=\"width:1200px\">"+
                    "<div id=adBig><a href=\"http://sc.chinaz.com/\" " +
                    "target=_blank><img title=2010年平湖在线首届家居建材团购会 "+
                    "src=\"images/top_lanrentuku_b.jpg\" " +
                    "border=0></A></div>"+
                    "<div id=adSmall style=\"display: none\">";
        //strTopAd+= topFlash;
       strTopAd+= topSmallBanner;
        strTopAd+= "</div></div>";
    }
    else
    {
        //strTopAd+=topFlash;
       strTopAd+= topSmallBanner;
    }
    strTopAd+="<div style=\"height:7px; clear:both;overflow:hidden\"></div>";
    return strTopAd;
}
document.write(TopAd());
$(function(){
   //过6秒显示 showImage(); 内容
    setTimeout("showImage();",6000);
});
function showImage()
{
    $("#adBig").slideUp(1000,function(){$("#adSmall").slideDown(1000);});
}

</script>

</body>
</html>