點擊按鈕,頁面滾動條向下滾動,分長按和短按兩種狀態 (簡單的效果)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="format-detection" content="telephone=no" />
<title>頁面滾動</title>
</head>
<body>
<div id="div" style="height: 2000px"></div>
<button id="btn">向下</button>
<style>
button{position: fixed; right: 10px; bottom: 10px;}
</style>
<script>

var btn = document.getElementById("btn");
var dv = document.getElementById("div");
var dvT = dv.scrollTop;
var step = 500;
var timer;
var clickTime = false;
var isclick=true;
var color = function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
};
/*********短按************/
function click_fn() {
dvT += step;
window.scrollTo(0,dvT);
dv.style.backgroundColor = color();
}
 /*********長按************/
function long() {
isclick=false;
dv.style.backgroundColor = color();
timer = setInterval(function(){
dvT += 5;
window.scrollTo(0,dvT);
},30)
}
btn.onmousedown = function(){
isclick=true;
clearTimeout(clickTime);
clickTime=setTimeout(long,1000);
};
btn.onmouseup = function(){
clearTimeout(clickTime);
clearInterval(timer);
if(isclick){
click_fn();
}
}
</script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM