jQuery弹出广告并自动收起特效代码

作者:Liaodeity - 2016年03月25日
jQuery弹出广告并自动收起特效代码

        在网站的开发中,有时候需要在首页弄个广告信息,该插件可以实现大图显示,2秒后收缩成小图显示,不会影响网站的正常浏览情况,是一个发布最新活动广告的好插件效果,挺多网站都会有展示该效果,因为毕竟图片活动广告,更加的容易引起用户的吸引了解。

一款打开页面显示大屏广告,2秒之后广告自动收起。

JS文件

可以灵活设置秒数,滚动速度等信息

// JScript 文件
function TopAd()
{
    var strTopAd="";
    
    //定义小图片内容
    var topSmallBanner="<div><a href=\"http://www.jianbaizhan.com/\" target=_blank><img src=\"images/top_090901_s.gif\" /></a></div>";
    
    //判断在那些页面上显示大图变小图效果,非这些地址只显示小图(或FLASH)
    if ( true)
    {
        //定义大图内容
        strTopAd="<div id=adimage style=\"width:980px\margin: 0 auto\">"+
                    "<div id=adBig><a href=\"http://www.jianbaizhan.com/\" " + 
                    "target=_blank><img title=YUANXIN "+
                    "src=\"images/top_zzsc_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(){
    $second = 1;//设置多少秒收缩大图
    //过两秒显示 showImage(); 内容
    setTimeout("showImage();",$second * 1000);
    //alert(location);
});
function showImage()
{
    $("#adBig").slideUp(1000,function(){$("#adSmall").slideDown(1000);});
}

插件截图


本文作者: Liaodeity

本文链接: https://www.jianbaizhan.com/code/777.html

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!