使用js制作滑动条

最新推荐文章于 2024-05-17 04:04:51 发布

springmoontree

最新推荐文章于 2024-05-17 04:04:51 发布

阅读量1.6k

点赞数

分类专栏： JavaScript的探索之路

本文链接：https://blog.csdn.net/qq_29999249/article/details/61422156

版权

JavaScript的探索之路专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动条</title>
	<style>
		#outer{
			position: relative;
			width:800px;
			height:20px;
			background-color: #ccc;
			margin:20px auto;
		}
		#inner{
			position: absolute;
			left:0;
			width:20px;
			height:20px;
			background-color: red;
			cursor:pointer;
		}
		#box{
			width:0px;
			height:0px;
			background-color: green;
			margin:0 auto;
			opacity: 0;
		}
	</style>
</head>
<body>
	<div id="outer">
		<div id="inner"></div>
	</div>
	<div id="box"></div>
	<script>
		function getPos(ev){
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
			return{x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
		}
		function getStyle(obj,name){
			if(obj.currentStyle){
				return obj.currentStyle[name];
			}
			else{
				return getComputedStyle(obj,false)[name];
			}
		}
		var oDiv = document.getElementById('inner');
		var oDiv2 = document.getElementById('outer');
		var oBox = document.getElementById('box');
		oDiv.onmousedown = function(ev){
			var oEvent = ev || event;
			var pos = getPos(oEvent);
			var disx = pos.x - parseInt(getStyle(oDiv,'left'));
			document.onmousemove = function(ev){
				var oEvent = ev || event;
				var pos = getPos(oEvent);
				var l = pos.x - disx;
				if (l<0) {
					l=0;
				}
				if (l>parseInt(getStyle(oDiv2,'width')) - parseInt(getStyle(oDiv,'width'))) {
					l=parseInt(getStyle(oDiv2,'width')) - parseInt(getStyle(oDiv,'width'))
				}
				oDiv.style.left = l + 'px';
				oBox.style.width = l/2 + 'px';
				oBox.style.height = l/2 + 'px';
				oBox.style.opacity = l/800;
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
			return false;
		}
		
	</script>
</body>
</html>

演示的效果：

springmoontree

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用js制作滑动条

滑动条 #outer{ position: relative; width:800px; height:20px; background-color: #ccc; margin:20px auto; } #inner{ position: absolute; left:0; width:20px; height:20px;
复制链接

扫一扫