网页浮动窗口跟随页面上下滑动效果

网页浮动窗口跟随页面上下滑动效果，当网页滚动条向下滚动的时候，该浮动窗口也会向下滑动。

核心代码：

		<script>

		var tips;

		var theTop = 100; /*这是默认高度,越大越往下*/

		var old = theTop;

		window.onload=function(){

		initFloatTips();

		}

		function initFloatTips() {

		    tips = document.getElementById('box');

		    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);

		}

		</script>

效果截图：

网页浮动窗口跟随页面上下滑动效果

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=gb2312&quot; /&gt;
&lt;title&gt;网页浮动窗口跟随页面上下滑动效果&lt;/title&gt;
&lt;style&gt;
	body {height:2000px;}
&lt;/style&gt;
&lt;script&gt;
var tips;
var theTop = 100; /*这是默认高度,越大越往下*/
var old = theTop;
window.onload=function(){
	initFloatTips();
}

function initFloatTips() {
    tips = document.getElementById(&#039;box&#039;);
    moveTips();
};
function moveTips() {
    var tt = 50;
    if (window.innerHeight) {
        pos = window.pageYOffset
    } else if (document.documentElement &amp;&amp; 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 &lt; theTop) pos = theTop;
    if (pos != old) {
        tips.style.top = pos + &quot;px&quot;;
        tt = 10;
    }
    old = pos;
    setTimeout(moveTips, tt);
}
&lt;/script&gt;	
&lt;/head&gt;
&lt;body&gt;

&lt;div id=&quot;box&quot; style=&quot;width:160px;height:300px;background:#CCC;position:absolute;top:100px;left:0;&quot;&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

随机推荐

JS高级Marquee代码
JS高级Marquee代码创建实例: //参数直接赋值法 new Marquee(marquee) new Marquee(marquee,top) ...... new Marquee(marquee,0,1,760,52) new Marquee(marquee,top,1,760,52,50,5000) ...... new Marquee(marquee,0,1,760,104,50,5000,3000,52) new Marquee
非常简洁的网页Tab效果setTab
网页上使用频率最高的Tab标签效果，封装成了一个setTab函数，使用方法非常简单。 setTab函数完整代码：复制代码代码如下: script function setTab(name, cursel, n) { for (i = 1; i = n; i++) { var menu = document.getElementById(name + i); var con =
JS小太阳在页面移动
JS小太阳在页面移动，移到小太阳上有文字提示，点击可进行咨询。效果截图：
flash图片轮播bcastr4
flash图片轮播bcastr4,flash实现的图片轮播播放器效果。包含一个slide.swf和一个配置文件config.xml。使用起来简单方便。示例打包下载： flash图片轮播bcastr4 测试请上传到服务器上。使用代码：复制代码代码如下: object id=bcastr4 data=swf/slide.swf
纯JS写的右下角QQ抖动效果
纯JS写的右下角QQ抖动效果，代码简单容易理解修改。复制代码代码如下: script /*** 窗口抖动 ***/ function shake(){ var a=[bottom,right],b=0; var u=setInterval(function(){ document.getElementById(lovexin1).style[a[b%2]]=(b++)%42?0:4 + px; if(b

网页浮动窗口跟随页面上下滑动效果

相关文章

随机推荐