頁(yè)面實(shí)現(xiàn)滑動(dòng)JS代碼

js實(shí)現(xiàn)隨頁(yè)面滑動(dòng)效果的方法。具體如下：

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

頁(yè)面向上向下滾動(dòng)，分享到的模塊隨著滑動(dòng)。

要點(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);

獲得頁(yè)面垂直居中的位置

上代碼：

!DOCTYPE html

html

head

meta charset="gb2312" /

title無(wú)標(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如何實(shí)現(xiàn)慣性滑動(dòng)效果

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

下面是簡(jiǎn)單的js代碼實(shí)現(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)按下事件，主要計(jì)算鼠標(biāo)當(dāng)前位置，和移動(dòng)位置。這樣可以計(jì)算出鼠標(biāo)移動(dòng)速度。

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

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

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

clearInterval(timer);??????

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

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)抬起后，清掉移動(dòng)事件。

document.onmousemove=null;????

document.onmouseup=null;

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

startMove();????

}????

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

return?false;

}?????????

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

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的滑動(dòng)學(xué)習(xí) 求每行的作用 沒個(gè)function的作用 越詳細(xì)越好 我是javascript新手

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

大體講下：

var glide =new function(){

//對(duì)象實(shí)列化

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

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

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

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

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

如何用js做到滑動(dòng)效果

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

下面是簡(jiǎn)單的js代碼實(shí)現(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)按下事件，主要計(jì)算鼠標(biāo)當(dāng)前位置，和移動(dòng)位置。這樣可以計(jì)算出鼠標(biāo)移動(dòng)速度。

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

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

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

clearInterval(timer);??????

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

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)抬起后，清掉移動(dòng)事件。

document.onmousemove=null;????

document.onmouseup=null;???

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

startMove();????

}????

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

return?false;?

}?????????

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

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控制頁(yè)面滾動(dòng)（實(shí)例）

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

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

過(guò)程：

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

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

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

4.美化一下，css寫寫

5.先寫簡(jiǎn)單的按鈕事件

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

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

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

9.測(cè)試檢查一下。

完成啦，啦啦啦～

我的截圖：

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

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

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

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

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

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

廣告

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