js滾動(dòng)條平滑移動(dòng)示例代碼
本文實(shí)例為大家分享了js滾動(dòng)條平滑移動(dòng)相關(guān)代碼,供大家參考,具體內(nèi)容如下
html頁
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Scripts/JavaScript9.js"></script>
<link href="../Content/StyleSheet9.css" rel="stylesheet" />
<script src="../Scripts/cxc.js"></script>
<meta charset="utf-8" />
</head>
<body>
<input type="button" id="bt" value="滑動(dòng)滾動(dòng)條" />
<div id="back">
</div>
<div id="container">
<div id="main">
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
<div class="d">
<p>如果有人說自己得到了真理,對(duì)不起,請(qǐng)恕鄙人無法相信。原因就不多談了,這種拿真理吹牛逼的行為</p>
</div>
</div>
</div>
</body>
</html>
js頁
var body, back, container, main,bt; //dom
window.onload = function () {
domload();
dominit();
events();
};
var domload = function () {
body = document.body;
back = $("back");
container = $("container");
main = $("main");
bt = $("bt");
};
var dominit = function () {
setH(back, screenH);
setH(container, screenH);
setH(main, screenW);
};
var events = function () {
AddEvent(bt, EventsType[0], function () {
var speed = 10;
var min = 0,max = 449;
var scrolldown = function () {
min += speed;
if (min < max) {
container.scrollTop = min;
setTimeout(scrolldown, 4);
}
};
setTimeout(scrolldown, 100);
});
};
css頁
* {
margin:0px;
padding:0px;
}
#back {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
z-index: 1;
background-image: url('../Images/psbg/bg7.png');
}
#container{
position:absolute;
width:100%;
top:0px;
left:0px;
z-index:100;
overflow:auto;
}
#main{
position:absolute;
width:100%;
top:0px;
left:0px;
}
.d{
margin-top:50px;
}
#bt{
position:absolute;
top:0;
right:50px;
z-index:200;
}
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- javaScript實(shí)現(xiàn)滾動(dòng)條事件詳解
- 原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果
- JS自定義滾動(dòng)條效果簡單實(shí)現(xiàn)代碼
- JavaScript限定范圍拖拽及自定義滾動(dòng)條應(yīng)用(3)
- 學(xué)習(xí)使用jquery iScroll.js移動(dòng)端滾動(dòng)條插件
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- 判斷滾動(dòng)條到底部的JS代碼
- JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁面底部并執(zhí)行事件的方法
- js操作滾動(dòng)條事件實(shí)例
- javascript實(shí)現(xiàn)自定義滾動(dòng)條效果
相關(guān)文章
為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。2011-06-06
讓mayfish支持mysqli數(shù)據(jù)庫驅(qū)動(dòng)的實(shí)現(xiàn)方法
mysql 是非持繼連接函數(shù)而 mysqli 是永遠(yuǎn)連接函數(shù)。也就是說 mysql 每次鏈接都會(huì)打開一個(gè)連接的進(jìn)程而 mysqli 多次運(yùn)行 mysqli 將使用同一連接進(jìn)程,從而減少了服務(wù)器的開銷。2010-05-05
js監(jiān)聽鼠標(biāo)點(diǎn)擊和鍵盤點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁面
這篇文章主要介紹了js監(jiān)聽鼠標(biāo)點(diǎn)擊(onmousedown)和鍵盤點(diǎn)擊(onkeydown)事件并自動(dòng)跳轉(zhuǎn)頁面,很簡單的一個(gè)實(shí)現(xiàn)2014-09-09
js+html5實(shí)現(xiàn)手機(jī)九宮格密碼解鎖功能
這篇文章主要為大家詳細(xì)介紹了js+html5實(shí)現(xiàn)手機(jī)九宮格密碼解鎖功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
bootstrap table插件動(dòng)態(tài)加載表頭
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件動(dòng)態(tài)加載表頭,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
可以用鼠標(biāo)拖動(dòng)的DIV實(shí)現(xiàn)思路及代碼
DIV可以拖動(dòng)的效果,想必大家都有見到過吧,在本文也為大家實(shí)現(xiàn)一個(gè)不錯(cuò)的可以用鼠標(biāo)拖動(dòng)的div,感興趣的各位不要錯(cuò)過2013-10-10

