快捷導(dǎo)航

js實(shí)現(xiàn)自定義滾動(dòng)條的示例

更新時(shí)間：2020年10月27日 08:35:51 作者：星輝

這篇文章主要介紹了js實(shí)現(xiàn)自定義滾動(dòng)條的示例，幫助大家制作JS特效，美化自身網(wǎng)頁(yè)，感興趣的朋友可以了解下

自定義滾動(dòng)條

代碼實(shí)例
代碼解析
下載源碼鏈接

代碼實(shí)例

* {
	padding: 0;
	margin: 0;
}
#box1 {
	width: 500px;
	height: 20px;
	background: #999;
	position: relative;
	margin: 20px auto;
}
#box2 {
	width: 20px;
	height: 20px;
	background: green;
	position: absolute;
}
#box3 {
	width: 0;
	height: 0;
	margin: 20px auto;
}
#box3 img {
	width: 100%;
	height: 100%;
}

<div id="box1">
<div id="box2"></div>
</div>
<div id="box3">
	<img src="./1.jpg">
</div>

// 獲取dom元素
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');

// 按下滾動(dòng)條后的操作
oBox2.onmousedown = function(e) {
// 獲取事件的必備操作，保證事件被獲取
var oEvent = e || event

// 保證只有被按下滾動(dòng)條后才能執(zhí)行此函數(shù)
document.onmousemove = function(e) {
	var oEvent = e || event
	var l = oEvent.clientX - oBox1.offsetLeft
	// 獲取滾動(dòng)條可活動(dòng)的寬度范圍
	var wid = oBox1.offsetWidth - oBox2.offsetWidth
	if (l < 0) {
		l = 0
	} else if (l > wid) {
		l = wid
	}
	// 位置定位
	oBox2.style.left = l + 'px'

	// 根據(jù)滾動(dòng)條位置獲得比例
	var scale = l / wid
	// 圖片的寬度和高度
	var w = 3264 * scale
	var h = 4080 * scale
	// oBox3.style.cssText是加在內(nèi)嵌style中的
	oBox3.style.cssText += 'width:' + w + 'px;height:' + h + 'px;'
}

// 保證鼠標(biāo)松開(kāi)后事件不再執(zhí)行
document.onmouseup = function() {
	document.onmousemove = null
	document.onmousedown = null
}
}

代碼解析

elem.style.cssText是加在內(nèi)嵌style中的

// oBox3.style.cssText是加在內(nèi)嵌style中的
oBox3.style.cssText += 'width:' + w + 'px;height:' + h + 'px;

下載源碼鏈接

星輝的Github

以上就是js實(shí)現(xiàn)自定義滾動(dòng)條的示例的詳細(xì)內(nèi)容，更多關(guān)于js實(shí)現(xiàn)自定義滾動(dòng)條的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

微信小程序頁(yè)面間傳值與頁(yè)面取值操作實(shí)例分析
這篇文章主要介紹了微信小程序頁(yè)面間傳值與頁(yè)面取值操作,結(jié)合實(shí)例形式分析了微信小程序頁(yè)面間傳值及頁(yè)面取值操作相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-04-04
全面解析JavaScript中offsetLeft、offsetTop的用法
本文主要介紹了全面解析JavaScript中offsetLeft、offsetTop的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
ES6 javascript中Class類(lèi)繼承用法實(shí)例詳解
這篇文章主要介紹了ES6 javascript中Class類(lèi)繼承用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了ES6繼承的基本用法、相關(guān)屬性、方法與使用技巧,需要的朋友可以參考下
2017-10-10
史上最為詳細(xì)的javascript繼承（推薦）
這篇文章主要介紹了javascript繼承，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
js自定義input文件上傳樣式
這篇文章主要為大家詳細(xì)介紹了js自定義input文件上傳樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
利用hasOwnProperty給數(shù)組去重的面試題分享
obj.hasOwnProperty(attr) 判斷是否是原型中的屬性，false就是原型中的屬性，下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2018-11-11
基于JavaScript短信驗(yàn)證碼如何實(shí)現(xiàn)
我們?cè)谑褂靡苿?dòng)、電信等運(yùn)營(yíng)商網(wǎng)上營(yíng)業(yè)廳的時(shí)候，為確保業(yè)務(wù)的完整和正確性，經(jīng)常會(huì)需要用到短信的驗(yàn)證碼。最近因?yàn)槟呈I(yè)務(wù)需要，也做了個(gè)類(lèi)似的功能
2016-01-01
JS使用oumousemove和oumouseout動(dòng)態(tài)改變圖片顯示的方法
這篇文章主要介紹了JS使用oumousemove和oumouseout動(dòng)態(tài)改變圖片顯示的方法,涉及javascript鼠標(biāo)事件及圖片操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
修復(fù)bash漏洞的shell腳本分享
這篇文章主要介紹了修復(fù)bash漏洞的shell腳本分享,本文腳本適應(yīng)常見(jiàn)的linux服務(wù)器系統(tǒng),如CentOS、Debian、Ubuntu、OpenSuSE、Aliyun等系統(tǒng),需要的朋友可以參考下
2014-12-12
JS+CSS實(shí)現(xiàn)類(lèi)似QQ好友及黑名單效果的樹(shù)型菜單
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)類(lèi)似QQ好友及黑名單效果的樹(shù)型菜單,涉及JavaScript結(jié)合鼠標(biāo)事件針對(duì)頁(yè)面元素CSS樣式的動(dòng)態(tài)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-09-09