側邊廣告

時間 2019-12-07

標籤側邊廣告简体版

原文原文鏈接

　　在逛網站咱們可能都會看到靠近網頁右邊的中間位置有個小廣告,無論咱們向上仍是向下滑動頁面它都始終垂直居中。最簡單的方式是用固定定位。javascript

　　先來佈局(爲了讓滾動條出現強行給個2000px的高。。。。。。)css

<body style="height:2000px">
	<div id="div1"></div>
</body>

cssjava

#div1{
	width: 100px;
        height: 100px;
        background: red;
        position: fixed;
        right: 0;
        top: calc(50% - 50px);
}

　這樣div就差很少在中間的位置了而且不會隨頁面滾動。函數

　這就完了?每當這種時候咱們就問問本身,IE6呢?而後當咱們放在IE6測試以後發現果真不行。。。。。。那怎麼辦呢?那是時候請出咱們的js了。佈局

不過咱們先把樣式改一下測試

#div1{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	right: 0;
　　  top: calc(50% - 50px);
}

而後咱們在分析一下，一開始是廣告欄處於中間。但隨着頁面的滾動,它會往上移動直至不見。居中的關鍵就在於計算廣告欄離頁面頂部的距離。在此以前咱們先來看看這段距離，它其實是頁面頂部到廣告欄頂部的距離,等於滾動條滾動的距離+(可視區的高度-廣告欄的高度)/2網站

　　將計算方法轉化爲代碼就是3d

window.onscroll = function(){
	var oDiv = document.getElementById('div1');
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;　　//滾動條滾動的距離

	var t = scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;　　//廣告欄距離頁面頂部的實際距離　　
}

　　距離算出來了，咱們還須要一個讓廣告欄滾動的函數startMove(iTarget)。爲了讓效果天然，選擇用定時器由快到慢的讓廣告欄移動到中間。因此速度能夠設置爲(目標位置-當前位置)/8,這樣越靠近中間速度就越慢。blog

window.onscroll = function(){
	var oDiv = document.getElementById('div1');
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

	var t = scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

	startMove(parseInt(t));
}
var timer = null;
function startMove(iTarget){
	var oDiv = document.getElementById('div1');
	var oTxt = document.getElementById('txt');
	clearInterval(timer);
	timer = setInterval(function(){
		var speed = (iTarget-oDiv.offsetTop)/8;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if(oDiv.offsetTop == iTarget){
			clearInterval(timer);
		}else{
			oDiv.style.top = oDiv.offsetTop+speed+'px';
		}
	},30)
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。