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)擊下方專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(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)簡(jiǎn)易聊天對(duì)話框(加滾動(dòng)條)
- js滾輪事件 js自定義滾動(dòng)條的實(shí)現(xiàn)
- JS實(shí)現(xiàn)滾動(dòng)條觸底加載更多
- 使用js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的滾動(dòng)條過程解析
- layer.js open 隱藏滾動(dòng)條的例子
- vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解
- JavaScript 獲取滾動(dòng)條位置并將頁(yè)面滑動(dòng)到錨點(diǎn)
相關(guān)文章
這篇文章主要介紹了CKeditor富文本編輯器使用技巧之添加自定義插件的方法,結(jié)合實(shí)例形式分析了CKeditor添加自定義插件的步驟與相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄?jiǎn)單談?wù)凧S中的正則表達(dá)式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
全面了解構(gòu)造函數(shù)繼承關(guān)鍵apply call
下面小編就為大家?guī)硪黄媪私鈽?gòu)造函數(shù)繼承關(guān)鍵apply call。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要源碼解讀了Bootstrap下拉菜單，介紹了Bootstrap各式各樣的下拉菜單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
提到加載事件，可能想到了window.onload，但實(shí)際上，加載事件是一大類事件，本文將詳細(xì)介紹加載事件。下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了js獲取當(dāng)前時(shí)間，一種是獲取昨天、今天、明天的準(zhǔn)確時(shí)間，一個(gè)精確到時(shí)分秒,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)切換多張圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了asp.net+js實(shí)現(xiàn)金額格式化的相關(guān)資料,需要的朋友可以參考下2015-02-02
本網(wǎng)站的javascript程序架構(gòu)從以下幾個(gè)基本點(diǎn)出發(fā)2008-10-10
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法，文章圍繞主題展開數(shù)據(jù)結(jié)構(gòu)與算法的概念，以及幾種常見的數(shù)據(jù)結(jié)構(gòu)是什么，有什么優(yōu)點(diǎn)和缺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07