jQ实现自定义滚动条

最新推荐文章于 2024-06-11 15:23:22 发布

Alicesa

最新推荐文章于 2024-06-11 15:23:22 发布

阅读量547

点赞数 1

分类专栏：前端jQuery 文章标签： html css jquery

本文链接：https://blog.csdn.net/Alicesa/article/details/108297959

版权

前端jQuery 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
        input {
			width: 30px;
			float: left;
		}
		#bigbox {
			border: 1px solid whitesmoke;
			height: 22px;
			width: 350px;
			float: left;
		}

		.box{
			height: 18px;
			width: 12px;
			background:greenyellow;
			position: relative;
			border: 1px solid snow;
			border-radius: 5px;
		}
	
	</style>
</head>

<body>
	<div id="bigbox">
		<div class="box"></div>
	</div>
	<input type="text" value="0" class="xs"/>
	<div class="cz">

</body>
<script src="dist/jquery.js"></script>
<script>
	$(function () {
		$(".box").mousedown(function (e) {
			var w = e.pageX - $(".box").offset().left;//获取距离
			$(document).mousemove(function (e) {
				var l = e.pageX - w;
				if (l < 0) {
					l = 0;
				}
				if (l > 350 - 12) {//定义号距离
					l = 350 - 12;
				}
				if (l > $(window).width() - $(".box").width()) {//滑动距离
					l = $(window).width() - $(".box").width()
				}
				$(".box").css({
					left: l + "px",
				})
				$(".xs").val(l);
			}).mouseup(function () {
					$(document).off('mousemove')
				})
				


		})
	});
</script>

</html>

效果

在这里插入图片描述

Alicesa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQ实现自定义滚动条

代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } input { width: 30px; float: left; } #bigbox { border: 1px solid whites
复制链接

扫一扫