春联式弹动广告

发现这些小东西经常要用到：做个笔记要用到就过来拿。

效果图如下，每次滚动滚动条，漂浮始终滑到屏幕的中间位置。

html，css如下：

?

<style type="text/css">

*{ margin:0; padding:0;}

.wapper{ width:980px; margin:0 auto; background:#B9B7B7; height:1000px;}

#rightFla{position:absolute; top:0px; right:0px; }

</style>

 

<div class="wapper"></div>

<div id="rightFla"><img src="./pf.png"></div><!--漂浮广告-->

js如下：

?

var timer =null;

function scrollAD(div,iTarget){

    clearInterval(timer);

    timer=setInterval(function(){

        var speed=parseInt((iTarget-div.offsetTop)/4);//求出速度，这样的速度是缓冲运动，到最后会以0的形式定时器一直运行

        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        div.style.top=div.offsetTop+speed+'px';

    },30);

}

window.onscroll=function(){//当浏览器开始滚动时

    var div=document.getElementById('rightFla');

    var scrollBody=document.body.scrollTop || document.documentElement.scrollTop;//滚动高度。

    var iTarget=parseInt(document.documentElement.clientHeight-div.offsetHeight)/2+scrollBody;//屏幕减去物体的高度再除2就是物体在屏幕中间的位置。

    scrollAD(div,iTarget)

};