js 滑动条加显示数字

最新推荐文章于 2022-10-24 14:01:47 发布

神奇大叔

最新推荐文章于 2022-10-24 14:01:47 发布

阅读量2.3k

点赞数 2

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103275699

版权

javaScript 专栏收录该内容

127 篇文章

订阅专栏

本文介绍了一个使用鼠标坐标实时更新div元素左偏移量的方法。通过监听鼠标事件，根据鼠标的位置调整div元素的left属性，实现div跟随鼠标移动的效果。同时，文章详细展示了如何在鼠标按下时显示div，并在鼠标移动时更新其位置，最后在鼠标抬起时隐藏div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是让div的左边距随着鼠标x坐标改变而改变

<html>
	<head>
		<meta  charset="utf-8"/>
		<title></title>
		<style>
			
			.show{
				width:30px;
				height:30px;
				border:solid 1px pink;
				position:absolute;
				text-align: center;
				display: none;
			}
		</style>
	</head>
	<body>
		<span>数值</span><input type="range" max="100" min="0" class="ra"/>
		<div class="show">
			
		</div>
		
		<script>
			
			var show=document.querySelector(".show");
			var ra=document.querySelector(".ra");
			var flag=false;
			
			ra.onmousedown=function()
			{
				//div显示
				
				show.style.display="block";
				//div内有range值
				show.innerHTML=ra.value;
				
				var templeft=event.clientX;
				show.style.left=templeft-15+"px";
				flag=true;
			}
			
			ra.onmousemove=function(){
				//范围校验
				//div随range变化的值
				
				
				if(flag){
					
					var templeft=event.clientX;
					if(templeft>=43&&templeft<201){
				
						show.style.left=templeft-15+"px";
						show.innerHTML=ra.value;
					}
				}
			}
			ra.onmouseup=function(){
				//添加鼠标抬起事件
				show.style.display="none";
				//鼠标消失
				flag=false;
			}
		</script>
	</body>
</html>