JS自定義滾動(dòng)條效果
更新時(shí)間：2020年03月13日 12:37:41 作者：李尚書
這篇文章主要為大家詳細(xì)介紹了JS自定義滾動(dòng)條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS自定義滾動(dòng)條的具體代碼，供大家參考，具體內(nèi)容如下
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#all{
width: 500px;
height: 50px;
background-color: sandybrown;
border-radius: 25px;
margin: 0 auto;
position: relative;
}
#div1{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rosybrown;
position: absolute;
}
#box{
background-color: yellow;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="all">
<div id="div1"></div>
</div>
<div id="box"></div>
<script type="text/javascript">
var oAll = document.getElementById("all");
var oDiv1 = document.getElementById("div1");
var oBox = document.getElementById("box");
var maxL = oAll.clientWidth - oDiv1.offsetWidth;
oDiv1.onmousedown = function(){
var ev = ev || window.event;
var lessX = ev.clientX - oDiv1.offsetLeft;
document.onmousemove = function(){
var ev = ev || window.event;
var posL = ev.clientX - lessX;
if(posL<0){
posL = 0;
}
if(posL>maxL){
posL = maxL;
}
oDiv1.style.left = posL + "px";
//滾動(dòng)條移動(dòng)的百分比
//oDiv1.offsetLeft/maxL
var per = posL/maxL;
//定義寬0~300
oBox.style.width = 300*per+"px";
oBox.style.height = 300*per+"px";
oBox.style.marginTop = -oBox.offsetHeight/2+"px";
oBox.style.marginLeft = -oBox.offsetWidth/2+"px";
}
}
document.onmouseup =function(){
document.onmousemove = null;
}
</script>
</body>
更多關(guān)于滾動(dòng)效果的精彩文章點(diǎn)擊下方專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 原生js實(shí)現(xiàn)自定義滾動(dòng)條組件
- 原生js實(shí)現(xiàn)自定義滾動(dòng)條
- js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)
- Vue.js桌面端自定義滾動(dòng)條組件之美化滾動(dòng)條VScroll
- JavaScript實(shí)現(xiàn)簡易聊天對話框(加滾動(dòng)條)
- js滾輪事件 js自定義滾動(dòng)條的實(shí)現(xiàn)
- JS實(shí)現(xiàn)滾動(dòng)條觸底加載更多
- 使用js實(shí)現(xiàn)一個(gè)簡單的滾動(dòng)條過程解析
- layer.js open 隱藏滾動(dòng)條的例子
- vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解
- JavaScript 獲取滾動(dòng)條位置并將頁面滑動(dòng)到錨點(diǎn)
相關(guān)文章
本文主要介紹了JavaScript this綁定與this指向問題的解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
JavaScript判斷用戶名和密碼不能為空的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫avaScript判斷用戶名和密碼不能為空的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
javascript showModalDialog模態(tài)對話框使用說明
使用javascript打開模態(tài)對話框，想學(xué)習(xí)showModalDialog使用方法的朋友可以參考下。2009-12-12
JavaScript編程開發(fā)中的五個(gè)實(shí)用小技巧
下面的5點(diǎn)說明確實(shí)不錯(cuò)，提高性能與可讀性，大家可以根據(jù)需要選擇使用。2010-07-07
JS實(shí)現(xiàn)超簡潔網(wǎng)頁title標(biāo)題跑動(dòng)閃爍提示效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)超簡潔網(wǎng)頁title標(biāo)題跑動(dòng)閃爍提示效果代碼,涉及JavaScript結(jié)合定時(shí)函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
!!一般用來將后面的表達(dá)式強(qiáng)制轉(zhuǎn)換為布爾類型的數(shù)據(jù)（boolean），也就是只能是true或者false。下面看看通過本文給大家介紹了JS中的!!，需要的朋友參考下吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了NProgress顯示頂部進(jìn)度條效果及使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
js 禁止復(fù)制js 復(fù)制js 禁止右鍵 復(fù)制文件js 禁止 js禁止選擇 js禁止右鍵代碼2008-02-02
Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06