春联式弹动广告

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

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

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.οnscrοll=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)
};

　　

 

 

转载于:https://www.cnblogs.com/ihqn19/p/3145645.html