对联广告js实现

昨天发现现有门户的对联广告在FF下显示的不正常了，看着很不爽，所以就小优化下。优化过的脚本适用于FF3.5.2/IE8/Throme3.0。
优化内容：
1. 使用匿名函数，避免广告脚本和引用页面对象冲突。但是渲染出的div对象仍需要另行处理（动态加guid）
2. 更换不兼容的脚本，适用大部分浏览器

(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 +";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 +";height:"+ _height +";right:10px;top:"+ _objTop +"px;Z-INDEX:701;'></div></a>");
    _leftClose.push("<div align='left' id='LeftCloseLayer' onclick='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 +"'>&nbsp;\u5173&nbsp;\u95ED</div>");
    _rightClose.push("<div align='right' id='RightCloseLayer' onclick='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 +"'>\u5173&nbsp;\u95ED&nbsp;</div>");

    _leftFrameDiv.push("<div id=\"LeftFrameDiv\">");
    _leftFrameDiv.push(_leftMask);
    _leftFrameDiv.push("<div id='LeftContentLayer' style='position:absolute;"+ _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 +";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();

})();

今天又略微调整了下，优化了定位的效率。

<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 +"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 +"px;height:"+ _height +"px;right:10px;top:"+ _objTop +"px;Z-INDEX:701;'></div></a>");
    _leftClose.push("<div align='left' id='LeftCloseLayer$Guid$' onclick='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 +"px;top:"+ _closeTop +"px;'>&nbsp;\u5173&nbsp;\u95ED</div>");
    _rightClose.push("<div align='right' id='RightCloseLayer$Guid$' onclick='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 +"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 +"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 +"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>