javascript動(dòng)畫系列之模擬滾動(dòng)條
更新時(shí)間：2016年12月13日 11:41:16 作者：小火柴的藍(lán)色理想
本文主要介紹了js動(dòng)畫模擬滾動(dòng)條的實(shí)現(xiàn)原理以及分享了通過(guò)滾動(dòng)條實(shí)現(xiàn)的幾個(gè)應(yīng)用的實(shí)例代碼:1.通過(guò)移動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)數(shù)字的加減;2.通過(guò)拖動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)元素尺寸的變化，以改變?cè)貙挾葹槔?3.通過(guò)拖動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)內(nèi)容滾。需要的朋友一起來(lái)看下吧
前面的話
當(dāng)元素內(nèi)容溢出元素尺寸范圍時(shí)，會(huì)出現(xiàn)滾動(dòng)條。但由于滾動(dòng)條在各瀏覽器下表現(xiàn)不同，兼容性不好。所以，模擬滾動(dòng)條也是很常見(jiàn)的應(yīng)用。本文將詳細(xì)介紹滾動(dòng)條模擬
原理介紹
滾動(dòng)條模擬實(shí)際上和元素模擬拖拽類似。僅僅通過(guò)范圍限定，使元素只可以在單一方向上拖拽
<div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
test.onmousedown = function(e){
e = e || event;
var that = this;
var disY = e.clientY - this.offsetTop;
document.onmousemove = function(e){
e = e || event;
var T = e.clientY - disY;
if(T < 0){T = 0;}
var TMax = parseInt(box.style.height) - that.offsetHeight;
if(T > TMax){T = TMax;}
that.style.top = T + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
//釋放全局捕獲
if(test.releaseCapture){test.releaseCapture();}
}
//IE8-瀏覽器阻止默認(rèn)行為
if(test.setCapture){test.setCapture();}
//阻止默認(rèn)行為
return false;
}
</script>
通過(guò)將上面代碼封裝成函數(shù)，可以實(shí)現(xiàn)橫向和縱向兩種滾動(dòng)條
<div id="box1" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test1" style="height: 60px;width: 16px;background-color:#555;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<div id="box2" style="height: 16px;width: 200px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test2" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<script>
function scrollbar(obj,str){
obj.onmousedown = function(e){
e = e || event;
var that = this;
//x軸方向
if(str == 'x'){
var disX = e.clientX - this.offsetLeft;
//否則為y軸方向
}else{
var disY = e.clientY - this.offsetTop;
}
document.onmousemove = function(e){
e = e || event;
if(str == 'x'){
var L = e.clientX - disX;
if(L < 0){L = 0;}
var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
if(L > LMax){L = LMax;}
that.style.left = L + 'px';
}else{
var T = e.clientY - disY;
if(T < 0){T = 0;}
var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
if(T > TMax){T = TMax;}
that.style.top = T + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
//釋放全局捕獲
if(obj.releaseCapture){obj.releaseCapture();}
}
//IE8-瀏覽器阻止默認(rèn)行為
if(obj.setCapture){obj.setCapture();}
//阻止默認(rèn)行為
return false;
}
}
scrollbar(test1);
scrollbar(test2,'x')
</script>
應(yīng)用
下面來(lái)介紹通過(guò)滾動(dòng)條實(shí)現(xiàn)的幾個(gè)應(yīng)用
數(shù)字加減
通過(guò)移動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)數(shù)字的加減。比例關(guān)系為：
滾動(dòng)條已移動(dòng)距離/滾動(dòng)條可移動(dòng)距離= 數(shù)字當(dāng)前值/數(shù)字最大值
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result">0</span>
<script>
function scrollbar(obj,str,max){
obj.onmousedown = function(e){
e = e || event;
var that = this;
//比例系數(shù)
var ratio;
//x軸方向
if(str == 'x'){
var disX = e.clientX - this.offsetLeft;
ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
//否則為y軸方向
}else{
var disY = e.clientY - this.offsetTop;
ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
}
document.onmousemove = function(e){
e = e || event;
if(str == 'x'){
var L = e.clientX - disX;
if(L < 0){L = 0;}
var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
if(L > LMax){L = LMax;}
that.style.left = L + 'px';
result.innerHTML = Math.round(ratio * L);
}else{
var T = e.clientY - disY;
if(T < 0){T = 0;}
var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
if(T > TMax){T = TMax;}
that.style.top = T + 'px';
result.innerHTML = Math.round(ratio * T);
}
}
document.onmouseup = function(){
document.onmousemove = null;
//釋放全局捕獲
if(obj.releaseCapture){obj.releaseCapture();}
}
//IE8-瀏覽器阻止默認(rèn)行為
if(obj.setCapture){obj.setCapture();}
//阻止默認(rèn)行為
return false;
}
}
scrollbar(test,'x',100);
</script>
元素尺寸
通過(guò)拖動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)元素尺寸的變化，以改變?cè)貙挾葹槔?/strong>。比例關(guān)系為：
滾動(dòng)條已移動(dòng)距離/滾動(dòng)條可移動(dòng)距離= 元素當(dāng)前寬度/元素最大寬度
<div id="box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;">
<div id="test" style="height: 16px;width: 60px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 1px;height: 50px;background-color:pink;display:inline-block;"></span>
<script>
function scrollbar(obj,str,max){
obj.onmousedown = function(e){
e = e || event;
var that = this;
//比例系數(shù)
var ratio;
//x軸方向
if(str == 'x'){
var disX = e.clientX - this.offsetLeft;
ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
//否則為y軸方向
}else{
var disY = e.clientY - this.offsetTop;
ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
}
document.onmousemove = function(e){
e = e || event;
if(str == 'x'){
var L = e.clientX - disX;
if(L < 0){L = 0;}
var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
if(L > LMax){L = LMax;}
that.style.left = L + 'px';
result.style.width = Math.round(ratio * L) + 'px';
}else{
var T = e.clientY - disY;
if(T < 0){T = 0;}
var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
if(T > TMax){T = TMax;}
that.style.top = T + 'px';
result.style.width = Math.round(ratio * T) + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
//釋放全局捕獲
if(obj.releaseCapture){obj.releaseCapture();}
}
//IE8-瀏覽器阻止默認(rèn)行為
if(obj.setCapture){obj.setCapture();}
//阻止默認(rèn)行為
return false;
}
}
scrollbar(test,'x',100);
</script>
內(nèi)容滾動(dòng)
通過(guò)拖動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)內(nèi)容滾動(dòng)，比例關(guān)系為：
滾動(dòng)條已移動(dòng)距離/滾動(dòng)條可移動(dòng)距離= 內(nèi)容已移動(dòng)距離/內(nèi)容可移動(dòng)距離
<div id="box" style="height: 200px;width: 16px;display:inline-block;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,0.3);position:relative;vertical-align:middle;">
<div id="test" style="height: 60px;width: 16px;background-color:#D62929;box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;position:absolute;"></div>
</div>
<span id="result" style="width: 100px;height: 200px;background-color:pink;display:inline-block;line-height:30px;vertical-align:middle;position:relative;overflow:hidden;"><div id="resultIn" style="position:absolute;top:0;">測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br>測(cè)試文字<br></div></span>
<script>
function scrollbar(obj,str){
var max = result.offsetHeight - resultIn.offsetHeight;
obj.onmousedown = function(e){
e = e || event;
var that = this;
//比例系數(shù)
var ratio;
//x軸方向
if(str == 'x'){
var disX = e.clientX - this.offsetLeft;
ratio = max/(this.parentNode.offsetWidth - this.offsetWidth);
//否則為y軸方向
}else{
var disY = e.clientY - this.offsetTop;
ratio =max/(this.parentNode.offsetHeight - this.offsetHeight);
}
document.onmousemove = function(e){
e = e || event;
if(str == 'x'){
var L = e.clientX - disX;
if(L < 0){L = 0;}
var LMax = parseInt(obj.parentNode.style.width) - that.offsetWidth;
if(L > LMax){L = LMax;}
that.style.left = L + 'px';
resultIn.style.top = Math.round(ratio * L) + 'px';
}else{
var T = e.clientY - disY;
if(T < 0){T = 0;}
var TMax = parseInt(obj.parentNode.style.height) - that.offsetHeight;
if(T > TMax){T = TMax;}
that.style.top = T + 'px';
resultIn.style.top = Math.round(ratio * T) + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
//釋放全局捕獲
if(obj.releaseCapture){obj.releaseCapture();}
}
//IE8-瀏覽器阻止默認(rèn)行為
if(obj.setCapture){obj.setCapture();}
//阻止默認(rèn)行為
return false;
}
}
scrollbar(test,'y');
</script>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- 簡(jiǎn)單實(shí)現(xiàn)js間歇或無(wú)縫滾動(dòng)效果
- js超時(shí)調(diào)用setTimeout和間歇調(diào)用setInterval實(shí)例分析
- javascript學(xué)習(xí)筆記(十五) js間歇調(diào)用和超時(shí)調(diào)用
- JS無(wú)縫滾動(dòng)效果實(shí)現(xiàn)方法分析
- js實(shí)現(xiàn)頁(yè)面刷新滾動(dòng)條位置不變
- JS實(shí)現(xiàn)的相冊(cè)圖片左右滾動(dòng)完整實(shí)例
- JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件的方法
- js操作滾動(dòng)條事件實(shí)例
- js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部實(shí)例
- JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法
- js網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)事件實(shí)例分析
- JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果實(shí)例
相關(guān)文章
上一篇的目的只是讓大家簡(jiǎn)單的理解自定事件是如何模擬出來(lái)的，大家不難發(fā)現(xiàn)會(huì)有很多缺陷,本篇主要已解決上一篇的問(wèn)題為主，感興趣的朋友可以參考，或許本文對(duì)你有所幫助2013-02-02
基于JS制作一個(gè)網(wǎng)頁(yè)版的猜數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版的猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript設(shè)置body高度為瀏覽器高度的方法
這篇文章主要介紹了JavaScript設(shè)置body高度為瀏覽器高度的方法,實(shí)例分析了body高度的設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
window.location.hash 使用說(shuō)明
location是javascript里面管理地址欄的內(nèi)置對(duì)象.2010-11-11
javascript實(shí)現(xiàn)導(dǎo)航欄分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)導(dǎo)航欄分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Javascript類庫(kù)的頂層對(duì)象名用戶體驗(yàn)分析
針對(duì)jQuery、Ext、KISSY三者類庫(kù)的對(duì)比及分析已經(jīng)很多了，但多數(shù)是從功能和設(shè)計(jì)的角度切入，因此本篇文章決定換一個(gè)特殊的角度，從各類庫(kù)的頂層對(duì)象名的鍵盤輸入的體驗(yàn)上來(lái)對(duì)這三個(gè)類庫(kù)進(jìn)行比較。2010-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制圓弧與圓形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要給大家介紹了關(guān)于如何在前端使用JS進(jìn)行分類匯總的相關(guān)資料,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了discuz表情的JS提取方法,簡(jiǎn)單分析了discuz中表情JS文件調(diào)用的原理與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購(gòu)物選擇地址時(shí)一樣，通過(guò)選擇的省動(dòng)態(tài)加載城市列表，通過(guò)選擇的城市動(dòng)態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，下面使用原生的JavaScript來(lái)實(shí)現(xiàn)這個(gè)功能，需要的朋友參考下吧2016-02-02