頁面實現(xiàn)滑動JS代碼

js實現(xiàn)隨頁面滑動效果的方法。具體如下：

創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元慈利做網(wǎng)站,已為上家服務(wù),為慈利各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

頁面向上向下滾動，分享到的模塊隨著滑動。

要點(diǎn)：

代碼如下:

var scrtop =document.documentElement.scrollTop||document.body.scrollTop;

var height = document.documentElement.clientHeight||document.body.clientHeight;

var top = scrtop + (height - jb51.offsetHeight)/2;

top = parseInt(top);

獲得頁面垂直居中的位置

上代碼：

!DOCTYPE html

html

head

meta charset="gb2312" /

title無標(biāo)題文檔/title

style

body{margin:0; padding:0; font:12px/1.5 arial; height:2000px;}

#jb51{width:100px; height:200px; line-height:200px;

text-align:center; border:1p solid #ccc;

background:#f5f5f5; position:absolute; left:-100px; top:0;}

#jb51_tit{position:absolute; right:-20px; top:60px;

width:20px; height:60px; padding:10px 0;

background:#06c; text-align:center;

line-height:18px; color:#fff;}

/style

script

window.onload = function(){

var jb51 = document.getElementById("jb51");

jb51.onmouseover = function(){

startrun(jb51,0,"left")

}

jb51.onmouseout = function(){

startrun(jb51,-100,"left")

}

window.onscroll = window.onresize = function(){

var scrtop=document.documentElement.scrollTop||document.body.scrollTop;

var height=document.documentElement.clientHeight||document.body.clientHeight;

var top = scrtop + (height - jb51.offsetHeight)/2;

top = parseInt(top);

startrun(jb51,top,"top")

}

}

var timer = null

function startrun(obj,target,direction){

clearInterval(timer);

timer = setInterval(function(){

var speed = 0;

if(direction == "left"){

speed = (target-obj.offsetLeft)/8;

speed = speed0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetLeft == target){

clearInterval(timer);

}else{

obj.style.left = obj.offsetLeft + speed + "px";

}

}

if(direction == "top"){

speed = (target-obj.offsetTop)/8;

speed = speed0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetTop == target){

clearInterval(timer);

}else{

obj.style.top = obj.offsetTop + speed + "px";

}

document.title = obj.offsetTop + ',' + target + ',' +speed;

}

},30)

}

/script

/head

body

div id="jb51"

分享到內(nèi)容

span id="jb51_tit"分享到/span

/div

/body

/html

js如何實現(xiàn)慣性滑動效果

主要思路是：鼠標(biāo)當(dāng)前點(diǎn)到下一點(diǎn)直接間隔計算出速度。這樣就實現(xiàn)了慣性滑動效果。

下面是簡單的js代碼實現(xiàn)：僅供參考：

style????

#div1{?width:100px;?height:100px;?background:red;?position:absolute;?left:0px;?top:0;}????

/style????

script????

window.onload=function(){????

var?oDiv=document.getElementById('div1');????

var?iSpeedX=0;????

var?iSpeedY=0;?????

var?lastX=0;????

var?lastY=0;????

var?timer=null;?????

oDiv.onmousedown=function(ev){????//div的鼠標(biāo)按下事件，主要計算鼠標(biāo)當(dāng)前位置，和移動位置。這樣可以計算出鼠標(biāo)移動速度。

var?oEvent=ev?||?event;????

var?disX=oEvent.clientX-oDiv.offsetLeft;????

var?disY=oEvent.clientY-oDiv.offsetTop;??????

clearInterval(timer);??????

document.onmousemove=function(ev){???//鼠標(biāo)拖動事件。?

var?oEvent=ev?||?event;?????

oDiv.style.left=oEvent.clientX-disX+'px';????

oDiv.style.top=oEvent.clientY-disY+'px';????

iSpeedX=oEvent.clientX-lastX;????

iSpeedY=oEvent.clientY-lastY;?????

lastX=oEvent.clientX;????

lastY=oEvent.clientY;

}????

document.onmouseup=function(){????//當(dāng)鼠標(biāo)抬起后，清掉移動事件。

document.onmousemove=null;????

document.onmouseup=null;

oDiv.releaseCapture??oDiv.releaseCapture();??????

startMove();????

}????

oDiv.setCapture??oDiv.setCapture();????

return?false;

}?????????

function?startMove(){????//移動函數(shù)，主要操作是計算鼠標(biāo)移動速度和移動方向。

clearInterval(timer);????

timer=setInterval(function(){????

iSpeedY+=3;????

var?t=oDiv.offsetTop+iSpeedY;????

var?l=oDiv.offsetLeft+iSpeedX;????

if(tdocument.documentElement.clientHeight-oDiv.offsetHeight){????

t=document.documentElement.clientHeight-oDiv.offsetHeight;????

iSpeedY*=-0.8;????

iSpeedX*=0.8;

}?????

if(t0){????

t=0;????

iSpeedY*=-0.8;????

iSpeedX*=0.8;

}????

if(ldocument.documentElement.clientWidth-oDiv.offsetWidth){????

l=document.documentElement.clientWidth-oDiv.offsetWidth;

iSpeedX*=-0.8;????

iSpeedY*=0.8;????

}????

if(l0){????

l=0;????

iSpeedX*=-0.8;????

iSpeedY*=0.8;

}????

oDiv.style.left=l+'px';????

oDiv.style.top=t+'px';????

if(Math.abs(iSpeedX)1)iSpeedX=0;????

if(Math.abs(iSpeedY)1)iSpeedY=0;????

if(iSpeedX==0??iSpeedY==0??t==document.documentElement.clientHeight-oDiv.offsetHeight){????

clearInterval(timer);????

}????

document.title=i++;????

},30);

}????

};????

/script????

/head????

body????

div?id="div1"/div????

/body

javascript的滑動學(xué)習(xí) 求每行的作用 沒個function的作用 越詳細(xì)越好 我是javascript新手

大哥，這么一大串的，都要求注釋，太蛋疼了吧，這個代碼估計瀏覽器兼容性有局限性，你是新手，還是用jquery吧，學(xué)習(xí)jquery用法,完成一樣的功能估計少80%的代碼，而且兼容各種瀏覽器。

大體講下：

var glide =new function(){

//對象實列化

function $id(id){return document.getElementById(id);};

//里面的function就是這個類的方法，上面這個方法是知道Id,返回該id的dom對象

this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point)

//這個對象的.layerGlide屬性設(shè)置為方法，方法從上面的參數(shù)注釋理解，應(yīng)該控制滾動的

其他的基本什么可說，要做滾動控制層，主要是用js修改scrollTop，Left.....這些屬性，比如往上面滾動，高度設(shè)置100px,超過部分css設(shè)置隱藏，scrollTop就是實際的層內(nèi)容高度，js通過setInterval函數(shù)，多久時間執(zhí)行js修改scrollTop的值+++，等內(nèi)容全部滾玩了，又設(shè)置為0，知道原理，然后你自己寫js fucntion 然后像上面那樣封裝

如何用js做到滑動效果

主要思路是：鼠標(biāo)當(dāng)前點(diǎn)到下一點(diǎn)直接間隔計算出速度。這樣就實現(xiàn)了慣性滑動效果。

下面是簡單的js代碼實現(xiàn)：僅供參考：

style????

#div1{?width:100px;?height:100px;?background:red;?position:absolute;?left:0px;?top:0;}????

/style????

script????

window.onload=function(){????

var?oDiv=document.getElementById('div1');????

var?iSpeedX=0;????

var?iSpeedY=0;?????

var?lastX=0;????

var?lastY=0;????

var?timer=null;?????

oDiv.onmousedown=function(ev){????//div的鼠標(biāo)按下事件，主要計算鼠標(biāo)當(dāng)前位置，和移動位置。這樣可以計算出鼠標(biāo)移動速度。

var?oEvent=ev?||?event;????

var?disX=oEvent.clientX-oDiv.offsetLeft;????

var?disY=oEvent.clientY-oDiv.offsetTop;??????

clearInterval(timer);??????

document.onmousemove=function(ev){???//鼠標(biāo)拖動事件。?

var?oEvent=ev?||?event;?????

oDiv.style.left=oEvent.clientX-disX+'px';????

oDiv.style.top=oEvent.clientY-disY+'px';????

iSpeedX=oEvent.clientX-lastX;????

iSpeedY=oEvent.clientY-lastY;?????

lastX=oEvent.clientX;????

lastY=oEvent.clientY;??

}????

document.onmouseup=function(){????//當(dāng)鼠標(biāo)抬起后，清掉移動事件。

document.onmousemove=null;????

document.onmouseup=null;???

oDiv.releaseCapture??oDiv.releaseCapture();??????

startMove();????

}????

oDiv.setCapture??oDiv.setCapture();????

return?false;?

}?????????

function?startMove(){????//移動函數(shù)，主要操作是計算鼠標(biāo)移動速度和移動方向。

clearInterval(timer);????

timer=setInterval(function(){????

iSpeedY+=3;????

var?t=oDiv.offsetTop+iSpeedY;????

var?l=oDiv.offsetLeft+iSpeedX;????

if(tdocument.documentElement.clientHeight-oDiv.offsetHeight){????

t=document.documentElement.clientHeight-oDiv.offsetHeight;????

iSpeedY*=-0.8;????

iSpeedX*=0.8;??

}?????

if(t0){????

t=0;????

iSpeedY*=-0.8;????

iSpeedX*=0.8;??

}????

if(ldocument.documentElement.clientWidth-oDiv.offsetWidth){????

l=document.documentElement.clientWidth-oDiv.offsetWidth;???

iSpeedX*=-0.8;????

iSpeedY*=0.8;????

}????

if(l0){????

l=0;????

iSpeedX*=-0.8;????

iSpeedY*=0.8;??

}????

oDiv.style.left=l+'px';????

oDiv.style.top=t+'px';????

if(Math.abs(iSpeedX)1)iSpeedX=0;????

if(Math.abs(iSpeedY)1)iSpeedY=0;????

if(iSpeedX==0??iSpeedY==0??t==document.documentElement.clientHeight-oDiv.offsetHeight){????

clearInterval(timer);????

}????

document.title=i++;????

},30);?

}????

};????

/script????

/head????

body????

div?id="div1"/div????

/body

js控制頁面滾動（實例）

目標(biāo)描述：多個圖片排列下來，按右邊的小按鈕，抵達(dá)相應(yīng)位置，鼠標(biāo)滑動，抵達(dá)下一圖，或者上一圖

知識點(diǎn)：onmousewheel，addEventListener，scrollTo，setTimeout

過程：

1.body 寬，高釘死，100vw，100vh，overflow：hidden 使得不出現(xiàn)滾動條，不然不好看

2.圖片放進(jìn)去，排起來，（注意：默認(rèn)空隙的處理，可以使用flex布局，空隙就不見了）

3.制作相對于視窗的按鈕，幾張圖片就幾個按鈕，（position: fixed;計算一下高度，可以利用calc計算top使得上下居中）

4.美化一下，css寫寫

5.先寫簡單的按鈕事件

6.寫監(jiān)聽滑動事件(onmousewheel在火狐無效，DOMMouseScroll只在火狐有效)

react在componentDidMount的時候監(jiān)聽

7.補(bǔ)充寫一下火狐的

9.測試檢查一下。

完成啦，啦啦啦～

我的截圖：

缺點(diǎn)：這里我是一直對頁面進(jìn)行監(jiān)聽，導(dǎo)致滑動過快對時候動畫效果開始執(zhí)行對時間延后。體現(xiàn)為滑動對輕，整個就流暢一點(diǎn)。

ps：寫這種帶計算帶頁面，我覺得是考驗思維的，你可以對這里的知識點(diǎn)不熟練，但是你必須得能理解每一步的加加減減。

如何用JavaScript實現(xiàn)鼠標(biāo)滾輪滑動效果

javascript:function AutoScroll() {window.scrollBy(0,10); NextScroll = setTimeout('AutoScroll()', 120);window.onkeydown = StopScroll;};function StopScroll(e) {if(e.keyCode == 27){clearTimeout(NextScroll);};};AutoScroll();好像是這個吧-。-simple U里就有不過想用它替代滾輪 顯然還不現(xiàn)實[hr]來自于世界上最奇葩的：Opera/9.80 (Windows NT 6.2; WOW64) Presto/2.12.388 Version/12.13

當(dāng)前文章：javascript滑動,js觸摸滑動
URL分享：http://www.rwnh.cn/article10/dsdjogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、云服務(wù)器、網(wǎng)頁設(shè)計公司、企業(yè)網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)