您的位置：首页 > Web前端 > JavaScript

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

2013-04-22 10:12 387 查看
本文转自：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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航