js 右侧浮动层效果实现代码(跟随滚动)
实现代码一、
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<!--***********开始*************-->
<scripttype="text/javascript">
//<![CDATA[
vartips;vartheTop=200/*这是默认高度,越大越往下*/;varold=theTop;
functioninitFloatTips(){
tips=document.getElementById('floatTips');
moveTips();
};
functionmoveTips(){
vartt=50;
if(window.innerHeight){
pos=window.pageYOffset
}
elseif(document.documentElement&&document.documentElement.scrollTop){
pos=document.documentElement.scrollTop
}
elseif(document.body){
pos=document.body.scrollTop;
}
pos=pos-tips.offsetTop+theTop;
pos=tips.offsetTop+pos/10;
if(pos<theTop)pos=theTop;
if(pos!=old){
tips.style.top=pos+"px";
tt=10;
}
old=pos;
setTimeout(moveTips,tt);
}
//!]]>
</script>
<styletype="text/css">
.floatTips
{
position:absolute;
border:solid1px#777;
padding:3px;
top:250px;
right:5px;
width:30px;
height:300px;
background:#cccccc;
color:white;
}
.showDiv
{
position:absolute;
border:solid1px#777;
padding:3px;
top:250px;
right:5px;
width:300px;
height:300px;
background:#cccccc;
color:white;
}
</style>
<scripttype="text/javascript">
functionFunOnmouseUp(){
varobjFloatTips=$("floatTips");
varobjActivityContext=$("activityContext");
objFloatTips.className="showDiv";
objActivityContext.style.display="";
}
functionFunMouseOut(){
varobjFloatTips=$("floatTips");
varobjActivityContext=$("activityContext");
objFloatTips.className="floatTips";
objActivityContext.style.display="none";
}
function$(objID){
returndocument.getElementById(objID);
}
</script>
</head>
<bodyonload="initFloatTips()">
<divid="floatTips"onmouseover="FunOnmouseUp()"onmouseout="FunMouseOut()"class="floatTips">
最新的活动
<divid="activityContext"style="display:none">
显示最新的活动
</div>
</div>
<!--**********结束***************-->
<tablewidth="100%"border="0"cellpadding="0"cellspacing="0"bgcolor="#F7F7F7">
<tr>
<tdheight="2101">
</td>
</tr>
</table>
</body>
</html>
如果有时间的话会稍作美化然后加上动画效果应该就能算是个不错的浮动隐藏层了。
方法二、
一、把以下代码插入<body></body>标签中：
<divid="FloatDIV"style="position:absolute;top:0px;border-right:activeborder1pxsolid;border-top:activeborder1pxsolid;border-left:activeborder1pxsolid;border-bottom:activeborder1pxsolid;"> 浮动层示例：<br/> <atarget="_blank"href="tencent://message/?uin=101535223&Site=https://www.nhooo.com&Menu=yes"><imgborder="0"src="http://wpa.qq.com/pa?p=1:101535223:3"alt="有事您说话"></a> </div>
二、把以下代码插到</body>标签之后，设置MarginLeft、MarginTop、Width、Heigth四个变量的值
<scriptlanguage="javascript"type="text/javascript">
varMarginLeft=30;//浮动层离浏览器右侧的距离
varMarginTop=50;//浮动层离浏览器顶部的距离
varWidth=120;//浮动层宽度
varHeigth=45;//浮动层高度
//设置浮动层宽、高
functionSet()
{
document.getElementById("FloatDIV").style.width=Width;
document.getElementById("FloatDIV").style.height=Heigth;
}
//实时设置浮动层的位置
functionMove()
{
document.getElementById("FloatDIV").style.top=document.documentElement.scrollTop+MarginTop;
document.getElementById("FloatDIV").style.left=document.documentElement.clientWidth-Width-MarginLeft;
setTimeout("Move();",100);
}
Set();
Move();
</script>