js 右侧浮动层效果实现代码(跟随滚动)

前端之家收集整理的这篇文章主要介绍了js 右侧浮动层效果实现代码(跟随滚动)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现代码一、

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

<script type="text/javascript">
//<![CDATA[
var tips; var theTop = 200/这是默认高度,越大越往下/; var old = theTop;
function initFloatTips() {
tips = document.getElementById('floatTips');
moveTips();
};
function moveTips() {
var tt = 50;
if (window.innerHeight) {
pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
}
else if (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);
}
//!]]>

<style type="text/css">
.floatTips
{
position: absolute;
border: solid 1px #777;
padding: 3px;
top: 250px;
right: 5px;
width: 30px;
height: 300px;
background: #cccccc;
color: white;
}
.showDiv
{
position: absolute;
border: solid 1px #777;
padding: 3px;
top: 250px;
right: 5px;
width: 300px;
height: 300px;
background: #cccccc;
color: white;
}

SEOver="FunOnmouseUp()" onmouSEOut="FunMouSEOut()" class="floatTips"> 最新的活动

如果有时间的话 会稍作美化 然后加上动画效果 应该就能算是个不错的浮动隐藏层了。

方法二、

一、把以下代码插入标签中:

二、把以下代码插到标签之后,设置MarginLeft、MarginTop、Width、Heigth四个变量的值

//设置浮动层宽、高
function Set()
{
document.getElementById("FloatDIV").style.width = Width;
document.getElementById("FloatDIV").style.height = Heigth;
}

//实时设置浮动层的位置
function Move()
{
document.getElementById("FloatDIV").style.top = document.documentElement.scrollTop + MarginTop;
document.getElementById("FloatDIV").style.left = document.documentElement.clientWidth - Width - MarginLeft;
setTimeout("Move();",100);
}

Set();
Move();

原文链接:https://www.f2er.com/js/51569.html

猜你在找的JavaScript相关文章