对联广告js实现

最新推荐文章于 2022-11-16 18:31:21 发布
最新推荐文章于 2022-11-16 18:31:21 发布
阅读量120 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wpsl5168/archive/2009/08/20/1550999.html
版权
昨天发现现有门户的对联广告在FF下显示的不正常了，看着很不爽，所以就小优化下。优化过的脚本适用于FF3.5.2/IE8/Throme3.0。
优化内容：
1. 使用匿名函数，避免广告脚本和引用页面对象冲突。但是渲染出的div对象仍需要另行处理（动态加guid）
2. 更换不兼容的脚本，适用大部分浏览器


ContractedBlock.gif ExpandedBlockStart.gif ads_code

(function(){

var _targetUrl = "http%3a%2f%2felive.vnet.cn%2f",
    _isClose = true,
    _isScroll = true,
    _objTop = 100;    //int

    _picUrl1 = "http://www.vnet.cn/adsmaterial/12/4/100300new.gif",
    _picUrl2 = "http://www.vnet.cn/adsmaterial/12/4/100300new.gif",
    _clickUrl = "http://rad.vnet.cn/AdTrace.aspx?orderitemid=-173&url=http%3a%2f%2felive.vnet.cn%2f&location=VNET",

    _width = "100px",
    _height = "300px",

    _c1Array = new Array(),
    _c2Array = new Array(),
    _leftMask = new Array(),
    _rightMask = new Array(),
    _leftClose =  new Array(),
    _rightClose = new Array(),
    _leftFrameDiv = new Array(),
    _rightFrameDiv = new Array();


function init(){
    if (_picUrl1.substring(_picUrl1.lastIndexOf(".")+1, _picUrl1.length).toLowerCase() == "swf") {
        _c1Array.push("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ");
        _c1Array.push("codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='"+ _width +"' height='"+ _height +"'>");
        _c1Array.push("<param name='movie' value='" + _picUrl1 +"'><param name='quality' value='high'><param name='wmode' value='opaque'>");
        _c1Array.push("<embed src='" + _picUrl1 + "' quality='high' width='"+ _width +"' height='"+ _height +"' type='application/x-shockwave-flash'");
        _c1Array.push("pluginspage='http://www.macromedia.com/go/getflashplayer'></embed></object>");
        
    } else {
        _c1Array.push("<img border='0' height='100%' src='"+ _picUrl1 +"' width='100%'>");
    }

    if (_picUrl2.substring(_picUrl2.lastIndexOf(".")+1, _picUrl2.length).toLowerCase() == "swf") {
        _c2Array.push("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ");
        _c2Array.push("codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='100px' height='300px'>");
        _c2Array.push("<param name='movie' value='"+ _picUrl2 +"'><param name='quality' value='high'><param name='wmode' value='opaque'>");
        _c2Array.push("<embed src='"+ _picUrl2 +"' quality='high' width='"+ _width +"' height='"+ _height +"' type='application/x-shockwave-flash'");
        _c2Array.push("pluginspage='http://www.macromedia.com/go/getflashplayer'></embed></object>");
    } else {
        _c2Array.push("<img border='0' height='100%' src='"+ _picUrl2 +"' width='100%'>");
    }


    _leftMask.push("<a href='"+ _clickUrl +"' target='_blank'><div id='LeftMaskLayer' style='display:none;background-color:white;cursor:hand;opacity:0;filter:alpha(opacity=0);position:absolute;height:"+ _height +";width:"+ _width +";left:10px;top:"+ _objTop +"px;Z-INDEX:701;'></div></a>");
    _rightMask.push("<a href='"+ _clickUrl +"' target='_blank'><div id='RightMaskLayer' style='display:none;background-color:white;cursor:hand;opacity:0;filter:alpha(opacity=0);position:absolute;width:"+ _width +";height:"+ _height +";right:10px;top:"+ _objTop +"px;Z-INDEX:701;'></div></a>");
    _leftClose.push("<div align='left' id='LeftCloseLayer' οnclick='javascript:document.getElementById(\"LeftFrameDiv\").style.display=\"none\";document.getElementById(\"RightFrameDiv\").style.display=\"none\";' style='Z-INDEX:701;display:none;background-color:#cccccc;cursor:hand;font-size:9pt;padding-top:3px;position:absolute;width:"+ _width +"'>&nbsp;\u5173&nbsp;\u95ED</div>");
    _rightClose.push("<div align='right' id='RightCloseLayer' οnclick='javascript:document.getElementById(\"LeftFrameDiv\").style.display=\"none\";document.getElementById(\"RightFrameDiv\").style.display=\"none\";' style='Z-INDEX:701;background-color:#cccccc;cursor:hand;font-size:9pt;padding-top:3px;position:absolute;display:none;width:"+ _width +"'>\u5173&nbsp;\u95ED&nbsp;</div>");

    _leftFrameDiv.push("<div id=\"LeftFrameDiv\">");
    _leftFrameDiv.push(_leftMask);
    _leftFrameDiv.push("<div id='LeftContentLayer' style='position:absolute;width:"+ _width +";height:"+ _height +";left:10px;top:"+ _objTop +"px;Z-INDEX:700;'>"+_c1Array.join("")+"</div>");
    _leftFrameDiv.push(_leftClose);
    _leftFrameDiv.push("</div>");


    _rightFrameDiv.push("<div id=\"RightFrameDiv\">");
    _rightFrameDiv.push(_rightMask);
    _rightFrameDiv.push("<div id='RightContentLayer' style='position:absolute;width:"+ _width +";height:"+ _height +";right:10px;top:"+ _objTop +"px;Z-INDEX:700;'>"+_c2Array.join("")+"</div>");
    _rightFrameDiv.push(_rightClose);
    _rightFrameDiv.push("</div>");

    document.write(_leftFrameDiv.join(""));
    document.write(_rightFrameDiv.join(""));
}


function $(objID){
    return document.getElementById(objID);
}


function setLayerTop(){
            var _getScrollTop = function(){
                    if(window.pageYOffset)
                    {
                        return window.pageYOffset;
                    }
                    else if(document.documentElement && document.documentElement.scrollTop)
                    {
                        return document.documentElement.scrollTop;
                    }
                    else if(document.body)
                    {
                        return document.body.scrollTop;
                    }
            }
            
            var _currentTop;
            if (_isScroll) {
                _currentTop = _getScrollTop() + _objTop;
            } else {
                _currentTop = _objTop;
            }

            $("LeftMaskLayer").style.top = _currentTop + "px";
            $("LeftContentLayer").style.top = _currentTop + "px";
            $("LeftCloseLayer").style.top = parseInt($("LeftContentLayer").offsetTop) + parseInt($("LeftContentLayer").offsetHeight) + "px";

            $("RightMaskLayer").style.top = _currentTop+"px";
            $("RightContentLayer").style.top = _currentTop+"px";
            $("RightCloseLayer").style.top = parseInt($("RightContentLayer").offsetTop) + parseInt($("RightContentLayer").offsetHeight) + "px";
    }


function ShowAds(){

    init();
    
    $("LeftMaskLayer").style.display="block";
    $("LeftContentLayer").style.display="block";
    $("LeftMaskLayer").style.left = "10px";
    $("LeftContentLayer").style.left = "10px";
    $("LeftCloseLayer").style.left = "10px";

    $("RightMaskLayer").style.display="block";
    $("RightContentLayer").style.display="block";
    $("RightMaskLayer").style.right = "10px";
    $("RightContentLayer").style.right = "10px";
    $("RightCloseLayer").style.right = "10px";
    
    
    if (_targetUrl != "http%3a%2f%2f") {
        $("LeftMaskLayer").style.display = "block";
        $("RightMaskLayer").style.display = "block";
    }

    if (_isClose) {
        $("LeftCloseLayer").style.display = "block";
        $("RightCloseLayer").style.display = "block";
    }

    setInterval(setLayerTop, 200);
}

ShowAds();

})();

今天又略微调整了下，优化了定位的效率。
ContractedBlock.gif ExpandedBlockStart.gif 2009-08-21 modified
<script language="javascript" type="text/javascript" > 

(function(){
 
var _targetUrl = "http%3a%2f%2fwww.vnet.cn",
    _isClose = true,
    _isScroll = true,
    _objTop = "100px".toLowerCase().replace("px",""),    
 
 
    _picUrl1 = "http://www.vnet.cn/adsmaterial/12/4/100300new.gif",
    _picUrl2 = "http://www.vnet.cn/adsmaterial/12/4/100300new.gif",
    _clickUrl = "http://www.vnet.cn",
    _target = "_blank",
 
    _width = "100px".toLowerCase().replace("px",""),
    _height = "300px".toLowerCase().replace("px",""),
 
    _c1Array = new Array(),
    _c2Array = new Array(),
    _leftMask = new Array(),
    _rightMask = new Array(),
    _leftClose =  new Array(),
    _rightClose = new Array(),
    _leftFrameDiv = new Array(),
    _rightFrameDiv = new Array();
 
 
 
function init(){
 
    if (_picUrl1.substring(_picUrl1.lastIndexOf(".")+1, _picUrl1.length).toLowerCase() == "swf") {
        _c1Array.push("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ");
        _c1Array.push("codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='"+ _width +"px' height='"+ _height +"px'>");
        _c1Array.push("<param name='movie' value='" + _picUrl1 +"'><param name='quality' value='high'><param name='wmode' value='opaque'>");
        _c1Array.push("<embed src='" + _picUrl1 + "' quality='high' width='"+ _width +"px' height='"+ _height +"px' type='application/x-shockwave-flash'");
        _c1Array.push("pluginspage='http://www.macromedia.com/go/getflashplayer'></embed></object>");
        
    } else {
        _c1Array.push("<img border='0' height='100%' src='"+ _picUrl1 +"' width='100%'>");
    }
 
    if (_picUrl2.substring(_picUrl2.lastIndexOf(".")+1, _picUrl2.length).toLowerCase() == "swf") {
        _c2Array.push("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ");
        _c2Array.push("codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='100px' height='300px'>");
        _c2Array.push("<param name='movie' value='"+ _picUrl2 +"'><param name='quality' value='high'><param name='wmode' value='opaque'>");
        _c2Array.push("<embed src='"+ _picUrl2 +"' quality='high' width='"+ _width +"px' height='"+ _height +"px' type='application/x-shockwave-flash'");
        _c2Array.push("pluginspage='http://www.macromedia.com/go/getflashplayer'></embed></object>");
    } else {
        _c2Array.push("<img border='0' height='100%' src='"+ _picUrl2 +"' width='100%'>");
    }
 
    var _closeTop = parseInt(_objTop) + parseInt(_height);
    _leftMask.push("<a href='"+ _clickUrl +"' target='"+ _target +"'><div id='LeftMaskLayer$Guid$' style='display:none;background-color:white;cursor:hand;opacity:0;filter:alpha(opacity=0);position:absolute;height:"+ _height +"px;width:"+ _width +"px;left:10px;top:"+ _objTop +"px;Z-INDEX:701;'></div></a>");
    _rightMask.push("<a href='"+ _clickUrl +"' target='"+ _target +"'><div id='RightMaskLayer$Guid$' style='display:none;background-color:white;cursor:hand;opacity:0;filter:alpha(opacity=0);position:absolute;width:"+ _width +"px;height:"+ _height +"px;right:10px;top:"+ _objTop +"px;Z-INDEX:701;'></div></a>");
    _leftClose.push("<div align='left' id='LeftCloseLayer$Guid$' οnclick='javascript:document.getElementById(\"LeftFrameDiv$Guid$\").style.display=\"none\";document.getElementById(\"RightFrameDiv$Guid$\").style.display=\"none\";' style='Z-INDEX:701;display:none;background-color:#cccccc;cursor:pointer;font-size:9pt;padding-top:3px;position:absolute;width:"+ _width +"px;top:"+ _closeTop +"px;'>&nbsp;\u5173&nbsp;\u95ED</div>");
    _rightClose.push("<div align='right' id='RightCloseLayer$Guid$' οnclick='javascript:document.getElementById(\"LeftFrameDiv$Guid$\").style.display=\"none\";document.getElementById(\"RightFrameDiv$Guid$\").style.display=\"none\";' style='Z-INDEX:701;background-color:#cccccc;cursor:pointer;font-size:9pt;padding-top:3px;position:absolute;display:none;width:"+ _width +"px;top:"+ _closeTop +"px;'>\u5173&nbsp;\u95ED&nbsp;</div>");
 
    _leftFrameDiv.push("<div id=\"LeftFrameDiv$Guid$\">");
    _leftFrameDiv.push(_leftMask);
    _leftFrameDiv.push("<div id='LeftContentLayer$Guid$' style='position:absolute;width:"+ _width +"px;height:"+ _height +"px;left:10px;top:"+ _objTop +"px;Z-INDEX:700;'>"+_c1Array.join("")+"</div>");
    _leftFrameDiv.push(_leftClose);
    _leftFrameDiv.push("</div>");
 
 
    _rightFrameDiv.push("<div id=\"RightFrameDiv$Guid$\">");
    _rightFrameDiv.push(_rightMask);
    _rightFrameDiv.push("<div id='RightContentLayer$Guid$' style='position:absolute;width:"+ _width +"px;height:"+ _height +"px;right:10px;top:"+ _objTop +"px;Z-INDEX:700;'>"+_c2Array.join("")+"</div>");
    _rightFrameDiv.push(_rightClose);
    _rightFrameDiv.push("</div>");
 
    document.write(_leftFrameDiv.join(""));
    document.write(_rightFrameDiv.join(""));
 
}
 
function $(objID){
    return document.getElementById(objID);
}
 
function getScrollTop(){
    if(window.pageYOffset){
        return window.pageYOffset;
    }
    else if(document.documentElement && document.documentElement.scrollTop){
        return document.documentElement.scrollTop;
    }
    else if(document.body){
        return document.body.scrollTop;
    }
}
 
function setTop(){
         
            var _currentTop;
            if (_isScroll) {
                _currentTop = parseInt(getScrollTop()) + parseInt(_objTop);
            } else {
                _currentTop = _objTop;
            }
 
            var _closeLayerTop = parseInt(_currentTop) + parseInt(_height) + "px";
            _currentTop += "px";
            $("LeftCloseLayer$Guid$").style.top = _closeLayerTop;//parseInt($("LeftContentLayer$Guid$").offsetTop) + parseInt($("LeftContentLayer$Guid$").offsetHeight) + "px";
            $("RightCloseLayer$Guid$").style.top = _closeLayerTop;//parseInt($("RightContentLayer$Guid$").offsetTop) + parseInt($("RightContentLayer$Guid$").offsetHeight) + "px";

            $("LeftContentLayer$Guid$").style.top = _currentTop;
            $("RightContentLayer$Guid$").style.top = _currentTop;

            $("LeftMaskLayer$Guid$").style.top = _currentTop;
            $("RightMaskLayer$Guid$").style.top = _currentTop;
    }
 
 
function ShowAds(){
 
    init();
    
    $("LeftMaskLayer$Guid$").style.display="block";
    $("LeftContentLayer$Guid$").style.display="block";
    $("LeftMaskLayer$Guid$").style.left = "10px";
    $("LeftContentLayer$Guid$").style.left = "10px";
    $("LeftCloseLayer$Guid$").style.left = "10px";
 
    $("RightMaskLayer$Guid$").style.display="block";
    $("RightContentLayer$Guid$").style.display="block";
    $("RightMaskLayer$Guid$").style.right = "10px";
    $("RightContentLayer$Guid$").style.right = "10px";
    $("RightCloseLayer$Guid$").style.right = "10px";
    
    
    if (_targetUrl != "http%3a%2f%2f") {
        $("LeftMaskLayer$Guid$").style.display = "block";
        $("RightMaskLayer$Guid$").style.display = "block";
    }
 
    if (_isClose) {
        $("LeftCloseLayer$Guid$").style.display = "block";
        $("RightCloseLayer$Guid$").style.display = "block";
    }

 
    setInterval(setTop, 200);
}
 
ShowAds();
 
})();


</script>


转载于:https://www.cnblogs.com/wpsl5168/archive/2009/08/20/1550999.html

weixin_30596165
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对联广告JS代码效果大全
网际浪子专栏（曾用名littlehb）
06-13 5778
[普通效果]现在很多网站广告做的如火如荼，现在我就来介绍一下常见的对联浮动广告效果的代码使用方法，介绍的这种效果，在1024*768分辨率下正常显示，在800*600的分辨率下可以自动隐藏，以免遮住页面影响访问者浏览内容，下面就是实现效果所需代码：  CODE:[Copy to clipboard]      var delta=0.015    var collection;    functi
js实现对联广告功能
05-17
js实现对联广告功能 真正实现对联广告功能
JS实现对联广告和弹窗广告代码，可同时关闭不随屏幕滚动
telephone05的博客
11-16 1710
两边的对联广告不会随屏幕滚动，可同时关闭，弹窗广告定时弹出，可关闭
对联广告js
06-07 155
//var left_img=//var right_img=  var delta=0.05 var collection; function floaters() {  this.items = [];  this.addItem = function(id,x,y,content)      {     document.write(+content+);        
html自动浮动div广告,div+css下js浮动对联广告不随屏幕滚动的解决方法
weixin_26717737的博客
06-04 323
问题：用DIV+CSS做的模板，在ad.cnzz.cc下载正常的浮动对联广告，可不会随滚动条滚动，这是什么原因呢？答：是document.body不符合标准，换成document.documentElement就可以了，但不支持firefox浏览器。你也可以把-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/lo...
JS实现可关闭的对联广告效果代码
10-23
主要介绍了JS实现可关闭的对联广告效果代码,涉及JavaScript针对滚动事件动态设置页面元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS实现很实用的对联广告代码（可自适应高度）
10-23
主要介绍了JS实现很实用的对联广告代码,可实现固定相对位置悬浮展示及跟随屏幕上下滑动等功能,具有一定参考借鉴价值,需要的朋友可以参考下
仿百度联盟对联广告实现代码
09-04
【仿百度联盟对联广告实现】是网页设计中一种常见的广告布局方式，它通常出现在页面两侧，以固定位置展示广告内容，即便用户滚动页面，广告依然保持在屏幕的可见区域内。这种广告形式能够提高用户的关注度，增加点击...
对联广告代码.rar
07-03
本资源"对联广告代码.rar"提供了一套实现这种效果的JavaScript（JS）代码，下面我们将详细探讨对联广告的技术实现、应用场景以及如何使用这套代码。 首先，对联广告的实现主要依赖于HTML、CSS和JavaScript。HTML...
对联广告php代码,JS实现很实用的对联广告代码（可自适应高度）
weixin_36317943的博客
03-25 785
本文实例讲述了JS实现很实用的对联广告代码(可自适应高度)。分享给大家供大家参考。具体如下：这是一款很实用的基于JS+CSS+DIV的网页对联广告代码，自适应网页高度，也就是始终保持在一定调试，这款暂时没有关闭功能。运行效果截图如下：在线演示地址如下：具体代码如下：简洁对联广告代码lastScrollY=0;function heartBeat(){var diffY;if (document.d...
js 左右悬浮对联广告代码示例
10-25
主要介绍了js 左右悬浮对联广告代码示例,需要的朋友可以参考下
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
10-26
主要介绍了js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动,需要的朋友可以参考下
左右两侧对联广告特效 js
08-15
左右两侧对联广告特效，js文件......
一个对联广告的js
10-15
js实现的对联广告,使用起来很方便，不用再自己写，直接用就可以。
对联广告html,Js对联广告代码示例(入门)
weixin_42382944的博客
06-25 418
本节内容：Js对联广告代码例子：复制代码 代码示例:标准对联广告Js代码 - www.jquerycn.cnlastScrollY=0;function heartBeat(){var diffY;if (document.documentElement && document.documentElement.scrollTop)diffY = document.documentE...
html中设计对联,js实现很实用的对联广告代码 可自适应高度
weixin_30786813的博客
06-08 568
htmlhead-="-Type"=";=GBK"/简洁对联广告代码="JavaScript"type="text/javascript"lastScrollY=0;functionheartBeat(){vardiffY;if(document.documentElement&&document.documentElement.scrollTop)diffY=document.d...
js 对联广告
潇湘博客
07-15 1262
 //****************************************************************************************//& 名称: [对联广告] JS脚本类//& 作用: 显示页面的对联广告//& 方法://& SmileAdver.setLeftPos(10);          //设置左边对联的距页面左边的位置(PX)//
javascript制作对联广告
浪子回头
09-16 996
对联广告 - Citk.Net               family:黑体;">页面区域         var showad = true; var Toppx = 60;   //上端位置 var AdDivW = 100;  //宽度 var AdDivH = 360;  //高度 var PageWidth = 8
html对联广告代码
最新发布
12-09
以下是一个简单的HTML左右对联广告代码的例子： ```html ; top: 50%; left: 0;"> <a href="#"><img src="left_ad.jpg"> ; top: 50%; right: 0;"> <a href="#"><img src="right_ad.jpg"> ``` 其中，`position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值