jQuery滑动线条动态改变柱状图高度(基于CSS3和jQuery滑动特效实例代码)
- 建站教程
- 2024-10-11 19:45:02
jQuery滑动线条动态改变柱状图高度(基于CSS3和jQuery滑动特效实例代码)
jQuery实现的滑动线条动态改变柱状图高度效果，拖动左侧滑块可以控制对应柱状图高度，每一个滑块对应一个柱状图。
以下是一个使用jQuery和CSS3实现滑动线条动态改变柱状图高度的示例代码：
<!DOCTYPE html><html><head>
<title>滑动线条动态改变柱状图高度</title>
<style>
.container { width: 500px; margin: 50px auto;
} .slider { width: 100%; height: 10px; background-color: #ddd; position: relative; margin-bottom: 10px;
} .bar { width: 0; height: 100%; background-color: #ff0000; position: absolute; top: 0; left: 0;
} .handle { width: 20px; height: 20px; background-color: #000; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;
} </style></head><body>
<div class="container">
<div class="slider">
<div class="bar"></div>
<div class="handle"></div>
</div>
<div class="slider">
<div class="bar"></div>
<div class="handle"></div>
</div>
<div class="slider">
<div class="bar"></div>
<div class="handle"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$(".handle").on("mousedown", function(e) {
e.preventDefault(); var $this = $(this); var $slider = $this.closest(".slider"); var $bar = $slider.find(".bar"); var startX = e.pageX; var startWidth = $bar.width();
$(document).on("mousemove", function(e) { var moveX = e.pageX - startX; var newWidth = startWidth + moveX; if (newWidth >= 0 && newWidth <= $slider.width()) {
$bar.width(newWidth);
}
}).on("mouseup", function() {
$(document).off("mousemove mouseup");
});
});
}); </script></body></html>在上面的示例代码中，我们创建了一个包含多个滑动线条和柱状图的容器。每个滑动线条由一个灰色的背景条（.slider）和一个黑色的滑块（.handle）组成。通过拖动滑块，可以动态改变对应柱状图（.bar）的高度。
在jQuery代码中，我们使用mousedown事件来开始拖动操作，并使用mousemove事件来实时更新柱状图的高度。通过计算鼠标移动的距离，我们可以根据移动距离动态改变柱状图的宽度（.bar）。当鼠标释放时，我们停止拖动操作。
请注意，上述代码只提供了基本的滑动线条动态改变柱状图高度的实现，您可以根据需要进行进一步的样式和功能定制。
基于CSS3和jQuery滑动特效，jQuery滑动表单效果，jQuery滑动复选框操作菜单，jQuery滑动线条动态改变柱状图高度效果，
jQuery滑动线条动态改变柱状图高度(基于CSS3和jQuery滑动特效实例代码)由讯客互联建站教程栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jQuery滑动线条动态改变柱状图高度(基于CSS3和jQuery滑动特效实例代码)”
