现在的位置: 首页 > 综合 > 正文

[转]js页面跟随滚动条两侧漂浮广告

2012年05月09日 ⁄ 综合 ⁄ 共 4005字 ⁄ 字号 评论关闭

本文转自:http://www.noonenet.cn/newshtml/newsinfor/js-float-ad.html

代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <meta http-equiv="Content-Language" content="zh-CN" />
  <title>js页面跟随滚动条两侧漂浮广告</title>
 <style type="text/css">
 div.floats {/*浮动容器通用样式*/
  position:absolute;
  left:-1000px;
  /*上面两句是必需的,下面看实际情况去定义了*/
  border:solid 1px #777;
  padding:3px;
  background:#333;
  color:white;
  width:100px;
  height:80px;
  opacity: 0.5;
  filter:alpha(opacity=50);
  
 }
 div#test1,div#test2{top:100px;}/*居中向左右定位容器初始高度*/
div#test3,div#test4{top:200px;}/*左右定位的两个容器初始高度*/
 </style>
 
<script type="text/javascript">
 var D=new Function('obj','return document.getElementById(obj);')
 function htmlbody(){
  return (
   document.documentElement.clientHeight<=document.body.clientHeight
   &&document.documentElement.clientHeight!=0
  )
  ?document.documentElement:document.body;
 }
 //浏览器滚动条位置
function scrollLeft(){return (!window.pageYOffset)?htmlbody().scrollLeft:window.pageXOffset;}
 function scrollTop(){return (!window.innerHeight)?htmlbody().scrollTop:window.pageYOffset;}
 
//实际应距左距离
function getleft(strobjs,strLeftType,strleft){
  var temp_getleft = 0;
  if (strLeftType=="left"){
   temp_getleft = scrollLeft()*1 + strleft*1;
  }else if (strLeftType=="mid"){
   (strleft*1<0)
   ?temp_getleft = scrollLeft()*1 + strleft*1
   + htmlbody().clientWidth*1/2 - strobjs.offsetWidth*1
   :temp_getleft = (scrollLeft()*1+strleft*1 + htmlbody().clientWidth*1/2);
  }else if (strLeftType=="right"){
    temp_getleft 
    = scrollLeft()*1 + htmlbody().clientWidth*1 
    - strleft*1 - strobjs.offsetWidth*1;
  }
  return temp_getleft;
 }
 
function moveTips(strobj,theTop,theLeft,theLeftType) {
  var old,nowobj = D(strobj);
  var nowleft = nowobj.style.left.replace("px","")*1;//返回在改变窗口大小或移动横滚动条前的距左部距离(数值)
 var temp_left = getleft(nowobj,theLeftType,theLeft);//实际应距左距离
 var re_theTop = theTop;
  if (temp_left!=nowleft){//横向递增
  (Math.abs(temp_left-nowleft)>3&&Math.abs(temp_left-nowleft)<600)
   ?((temp_left>nowleft)?nowleft += Math.abs(temp_left-nowleft)/5
   :nowleft -= Math.abs(temp_left-nowleft)/5)
   :nowleft = temp_left;
   nowobj.style.left = nowleft + "px";
  }
  if (!openweb){old = re_theTop;var openweb;}/*这是默认高度*/;
   var pos,tt=50;
   pos = scrollTop()*1-nowobj.offsetTop*1+re_theTop*1;
   pos = nowobj.offsetTop+pos/10;//纵向开始递增
  if (pos < re_theTop) pos = re_theTop;
   if (pos != old) {nowobj.style.top = pos+"px";tt=5;}
   old = pos;
   setTimeout("moveTips('"+strobj+"','"+theTop+"','"+theLeft+"','"+theLeftType+"')",tt);
 }
 </script>
 
</head>
 <body>
 <div style="width:660px;border:1px solid #eee;margin:0 auto;height:3000px;">
换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

 换行占位符。。。
 

</div>
页面最底端~~~~页面最底端~~~~页面最底端~~~~页面最底端~~~~页面最底端~~~~页面最底端~~~~页面最底端~~~~页面最底端~~~~页面最底端~~~~
<div style="width:5000px;">
 </div>
 <div id="test1" class="floats">浮动层1 !</div>
 <div id="test2" class="floats">浮动层2 !</div>
 <div id="test3" class="floats">浮动层3 !</div>
 <div id="test4" class="floats">浮动层4 !</div>
 
<script type="text/javascript">
  moveTips('test1','100','332','mid',"0");
  moveTips('test2','100','-332','mid',"0");
  moveTips('test3','200','10','left',"1");
  moveTips('test4','200','10','right',"1");
 </script>
 </body>
 </html>

 

抱歉!评论已关闭.