一个浮动+触发的js代码

左下角一个200x200的logo浮动触发一个320x320的logo。

js文件内容如下：

function getOs()
{
   if(navigator.userAgent.indexOf("MSIE")>0)return "ie";
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return "firefox";
   if(isSafari=navigator.userAgent.indexOf("Safari")>0)return "safari";  
   if(isCamino=navigator.userAgent.indexOf("Camino")>0)return "camino";
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return "Gecko";
   return 0;
}
function createFloat(){
 if(getOs()=="ie"){
  //浮动元素
  var lf_div=document.createElement("div");
  var lf_width=200; //浮动元素宽度
  var lf_height=200; //浮动元素高度
  var lf_toLeft=0; //浮动元素左侧距离
  var lf_tobtm=0; //浮动元素底部距离
  var lf_toTop=parseInt(document.documentElement.clientHeight) + parseInt(document.body.scrollTop) - lf_height - lf_tobtm; //浮动元素的y坐标
  lf_div.id="lf_div";
  lf_div.style.width=lf_width;
  lf_div.style.height=lf_height;
  lf_div.style.position='absolute';
  lf_div.style.border="none";
  lf_div.style.display="block";
  lf_div.style.zIndex=10000;
  lf_div.style.top=lf_toTop+"px";
  lf_div.style.left=lf_toLeft + "px";
  document.body.appendChild(lf_div);
  //触发元素
  var lft_div=document.createElement("div");
  var lft_width=320; //浮动元素宽度
  var lft_height=320; //浮动元素高度
  var lft_toLeft=0; //浮动元素左侧距离
  var lft_tobtm=0; //浮动元素底部距离
  var lft_toTop=parseInt(document.documentElement.clientHeight) + parseInt(document.body.scrollTop) - lft_height - lft_tobtm; //浮动元素的y坐标
  lft_div.id="lft_div";
  lft_div.style.width=lft_width;
  lft_div.style.height=lft_height;
  lft_div.style.position='absolute';
  lft_div.style.border="none";
  lft_div.style.display="none";
  lft_div.style.zIndex=20000;
  lft_div.style.top=lft_toTop+"px";
  lft_div.style.left=lft_toLeft + "px";
  document.body.appendChild(lft_div);  
  lf_div.οnmοuseοver=function(){lf_div.style.display="none";lft_div.style.display="block";};
  lft_div.οnmοuseοut=function(){lf_div.style.display="block";lft_div.style.display="none";};
 }else{
  //浮动元素
  var lf_div=document.createElement("div");
  var lf_width=200; //浮动元素宽度
  var lf_height=200; //浮动元素高度
  var lf_toLeft=0; //浮动元素左侧距离
  var lf_tobtm=0; //浮动元素底部距离
  lf_div.id="lf_div";
  lf_div.style.width=lf_width;
  lf_div.style.height=lf_height;
  lf_div.style.position='fixed';
  lf_div.style.border="none";
  lf_div.style.display="block";
  lf_div.style.zIndex=10000;
  lf_div.style.bottom="0px";
  lf_div.style.left=lf_toLeft + "px";
  document.body.appendChild(lf_div);
  //触发元素
  var lft_div=document.createElement("div");
  var lft_width=320; //浮动元素宽度
  var lft_height=320; //浮动元素高度
  var lft_toLeft=0; //浮动元素左侧距离
  var lft_tobtm=0; //浮动元素底部距离
  lft_div.id="lft_div";
  lft_div.style.width=lft_width;
  lft_div.style.height=lft_height;
  lft_div.style.position='fixed';
  lft_div.style.border="none";
  lft_div.style.display="none";
  lft_div.style.zIndex=20000;
  lft_div.style.bottom="0px";
  lft_div.style.left=lft_toLeft + "px";
  document.body.appendChild(lft_div);
  lf_div.οnmοuseοver=function(){lf_div.style.display="none";lft_div.style.display="block";};
  lft_div.οnmοuseοut=function(){lf_div.style.display="block";lft_div.style.display="none";};
 }
}
function setInner(obj,con,url,is_swf,width,height){
 var swfHtml="";
 if(is_swf==1){
  if(getOs()=="ie" ){
  swfHtml += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+width+'" height="'+height+'">';
  swfHtml += '<param name="movie" value="'+ con +'" />';
  swfHtml += '<param name="quality" value="high" />';
  swfHtml += '<param name="wmode" value="opaque" />';
  swfHtml += '<embed src="'+ con +'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+width+'" height="'+height+'" wmode="opaque"  swliveconnect="true"></embed>';
  swfHtml += '</object>';
  }else{
  swfHtml += '<embed src="'+ con +'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+width+'" height="'+height+'" wmode="opaque"  swliveconnect="true"></embed>';
  }
 }else{
  swfHtml += '<a href="'+ url+'"><img src="'+con+'" width="'+width+'" height="'+height+'" border="0" target="_blank"></a>';
 }
 document.getElementById(obj).innerHTML=swfHtml;
}
function floatIt(){
 if(getOs()=="ie"){
 document.getElementById("lf_div").style.top=document.documentElement.scrollTop+document.documentElement.clientHeight-200+"px";
 document.getElementById("lft_div").style.top=document.documentElement.scrollTop+document.documentElement.clientHeight-320+"px";
 }
}
function floatingAd(left200,left200_url,left200_type,left320,left320_url,left320_type){
 createFloat();
 setInner("lf_div",left200,left200_url,left200_type,200,200);
 setInner("lft_div",left320,left320_url,left320_type,320,320);
 window.οnscrοll=floatIt;
 window.οnresize=floatIt; 
}

 

在需要显示广告的页面引入此js文件（放页面最后）

<script type="text/javascript" src="floatlogo.js"></script>
<script language="JavaScript">
new floatingAd(
"http://img2.cache.netease.com/cnews/2009/12/29/200912292023122e7bc.jpg","http://g.cn/",0,
"http://img1.126.net/channel7/005531/fangzheng360300_090424.swf","",1
);
</script>

其中六个参数，分别为浮动logo素材、浮动logo链接、素材类型，触发logo素材、触发logo链接、触发素材类型。测试在ie8、ie7、ff3.5、opera12、谷歌浏览器上ok

---

文章来源：http://songmuyi1216.blog.163.com/blog/static/15532326201004520515/