* {
	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)松開后事件不再執(zhí)行
document.onmouseup = function() {
	document.onmousemove = null
	document.onmousedown = null
}
}

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