jquery插件——滑动条(1)

来源：互联网发布：编程儿童编辑：程序博客网时间：2024/06/08 01:00
以下是一个基于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);// 拼接htmlmyslider_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);// 显示htmlobj.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>
0 0