jquery插件——滑动条(1)

最新推荐文章于 2022-11-12 11:00:13 发布

影天

最新推荐文章于 2022-11-12 11:00:13 发布

阅读量667

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xwlyun/article/details/44676849

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下是一个基于jquery的滑动条实例，实现了简单的滑动效果：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jquery插件-滚动条</title>
	<script type="text/javascript" src="../js/jquery_172.js"></script>
	<style type="text/css">
	.myslider{
		width: 300px;
		height: 5px;
		margin: 10px;
		background-color: #FFFFE0;
		border: 1px solid #A9C9E2;
		position: relative;
	}
	.myslider .completed{
		height: 3px;
		background-color: #7d9edb;
		top: 1px;
		left: 1px;
		position: absolute;
	}
	.myslider .slider{
		height: 15px;
		background-color: #E6E6FA;
		border: 1px solid #A5B6C8;
		top: -6px;
		width: 4px;
		display: block;
		cursor: pointer;
		position: absolute;
	}
	</style>
	<script type="text/javascript">
	(function ($){

		function mySlider(obj,settings){

			var _this = this;

			var myslider;			// 滚动条整体
			var myslider_completed;	// 已完成进度块
			var myslider_slider;	// 拖拽条

			// 默认配置项
			var defaults = {
				myCssName: 'myslider',
				completedCssName: 'completed',
				sliderCssName: 'slider',
				max: 100,
				min: 0
			};

			// 滚动条初始化
			this.onInit = function(){
				// 合并设置
				$.extend(defaults,settings);

				// 拼接html
				myslider_completed = $('<div></div>')
										.attr('class',defaults.completedCssName);

				myslider_slider = $('<div></div>')
									.attr('class',defaults.sliderCssName);

				myslider = $('<div></div>')
								.attr('class',defaults.myCssName)
									.append(myslider_completed)
										.append(myslider_slider);

				// 显示html
				obj.html(myslider);

				// bind事件
				myslider_slider.bind('mousedown',function(e){
					_this.onMouseDown(e);
				});

			};
			// 构造函数
			this.onInit();

			// 设置滚动条显示的值 [min,max]之间
			this.setProcess = function(value){
				var max = defaults.max;
				var min = defaults.min;
				value = (value > max) ? max : value;
				value = (value < min) ? min : value;

				var width = this.getWidth();
				var val = width*value/max;

				myslider_completed.css('width',val);
				myslider_slider.css('left',val);
			};

			this.onMouseDown = function(e){
				$(document).bind('mousemove',function(e){
					_this.onMouseMove(e);
				}).bind('mouseup',function(e){
					_this.onMouseUp(e);
				});
			};

			this.onMouseMove = function(e){
				var val = e.pageX - parseInt(myslider.offset().left);

				var max = defaults.max;
				var width = this.getWidth();
				var value = max*val/width;

				_this.setProcess(value);
			};

			this.onMouseUp = function(e){
				$(document).unbind('mousemove');
			};

			this.getWidth = function(e){
				var w = myslider.width();
				var s = myslider_slider.width();
				return w-s;
			};

		}

		$.fn.extend({

			jSlider: function(settings){
				return new mySlider($(this),settings);
			}

		});

	})(jQuery);
	</script>
</head>
<body>

	<div id="myslider1"></div>

	<div id="myslider2"></div>

	<script type="text/javascript">

		$(document).ready(function(){

			$('#myslider1').jSlider().setProcess(50);

			$('#myslider2').jSlider().setProcess(30);


		});

	</script>

</body>
</html>