中文字幕免费不卡二区_ JS按鈕控制內容上下滾動(dòng)

CSS代碼：

[css] view plain copy

*{ padding: 0; margin: 0;}
li{ list-style: none;}
a{ text-decoration: none; color: #333;}
a:hover{ color: #f00;}
.center{ text-align: center; margin-top: 20px; font-family: "Microsoft Yahei";}
#box{ width: 168px; margin: 20px auto; border: 1px solid #ccc; background: #fff; font-size: 12px; position: relative;}
#up ,#down{ position: absolute; z-index: 2; cursor: pointer; background: #eee; width: 100%; text-align: center; height: 28px; line-height: 28px;}
#up{ top: 0;}
#down{ bottom: 0;}
.content{ margin-top: 28px; height: 475px; overflow: hidden; position: relative; background: #ccc;}
#wrap{ position: absolute; top: 0;}
#wrap ul{ padding: 0 10px;}
#wrap li{ width: 148px; height: 100px; background: purple; margin-top: 10px;}

HTML代碼：

[html] view plain copy

JS代碼：

[javascript] view plain copy

// 封裝getStyle函數
function getStyle(obj ,attr){
return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj ,false)[attr];
}
window.onload = function(){
var oBox = document.getElementById('box');
// alert(getStyle(oBox,'width')) // 168px
var oUp = document.getElementById('up');
var oDown = document.getElementById('down');
var oWrap = document.getElementById('wrap');
var num = 0;
var timer = null;
// 鼠標按下向上鏈接，開(kāi)啟定時(shí)器
oUp.onmousedown = function(){
oWrap.timer = setInterval(function(){
// 先獲取內容的top值[獲取的是字符串，所以要用parseInt轉換成數字]，然后讓它每隔300ms減少5px使之向上運動(dòng)
var dis = parseInt(getStyle(oWrap,'top')) - 5;
// 這里的200是根據當前案例設置的，可以根據實(shí)際情況調整數值
if( dis < -220){
dis = -220;
}
oWrap.style.top = dis + 'px';
},30);
};
// 鼠標移開(kāi)向上鏈接，關(guān)閉定時(shí)器
oUp.onmouseup = function(){
clearInterval(oWrap.timer);
};
// 鼠標按下向下鏈接，開(kāi)啟定時(shí)器
oDown.onmousedown = function(){
oWrap.timer = setInterval(function(){
var dis = parseInt(getStyle(oWrap,'top')) + 5;
if(dis > 0){
dis = 0;
}
oWrap.style.top = dis + 'px';
},30);
};
// 鼠標移開(kāi)向下鏈接，關(guān)閉定時(shí)器
oDown.onmouseup = function(){
clearInterval(oWrap.timer);
};
};

運行效果如下：

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久