自写jQuery的滚动条Slider

最新推荐文章于 2024-10-25 16:41:21 发布

原创最新推荐文章于 2024-10-25 16:41:21 发布 · 985 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

本文详细介绍了 jQuerySlider 插件的功能，包括滑块的初始化、配置参数、事件处理等，并提供了使用示例代码，展示了如何通过 jQuerySlider 实现滑动控制功能。

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

/**

name:slider.js
  component:jQuery Slider
  version:0.0.1
  autor:fight
  date:2013年6月26日15:14:06
**/
(function($){
function init(conf,container) {
  var _conf = {
   container:container,               /**slider 容器**/
   length:112,                        /**slider刻度长度**/
   currentPosition:0,                 /**slider当前位置**/
   position:false,              /**false：表示没有事件处理,传方法进来,点击设置位置时触发 **/
   startslide:false,                  /**false：表示没有事件处理,传方法进来,开始移动slidercontroll时触发 **/
   moveslide:false,                   /**false：表示没有事件处理,传方法进来,移动时触发 **/
   endslide:false,                    /**false：表示没有事件处理,传方法进来,移动停止时触发 **/
   sacle:false,                       /**false：表示没有事件处理,传方法进来,点击放大缩小时触发 **/
   interval:1                         /**放大缩小间隔**/
  };
  $.extend(_conf,conf);
  return new Slider(_conf);
}

function Slider(conf) {
  function createSlider(slider) {
   var minEle = $('<span class="startmin"></span>');
   var controllerEle = $('<span class="slidercontainer"><span class="slidercontroller"></span></span>').width(conf.length);
   var maxEle = $('<span class="endmax"></span>');
   conf.container.empty().append(minEle,controllerEle,maxEle).select(function(){return false});
   conf.minEle = minEle;
   conf.controllerEle = controllerEle;
   conf.maxEle = maxEle;
   conf.slidercontroller = controllerEle.find('.slidercontroller');
   slider.setPosition(conf.currentPosition);
   controllerEle.click(function(){
    var e = event || window.event;
    var position = e.offsetX-6;
    slider.setPosition(position);
    var param = conf.currentPosition;
    if(conf.processParam) param = conf.processParam(param);
    slider.setSliderPosition(param);
    return false;
   });

   $('.slidercontroller',controllerEle).mousedown(function() {
    var e = event||window.event;
    conf.mousePosition = e.clientX;
    conf.start = true;
    return false;
   }).click(function() {
    return false;
   });

   $('body').mousemove(function() {
    if(conf.start) {
     var e = event||window.event;
     var offset = e.clientX-conf.mousePosition;
     conf.mousePosition = e.clientX;
     var position = conf.slidercontroller.position().left+offset;
     slider.setPosition(position);
     var param = conf.currentPosition;
     if(conf.processParam) param = conf.processParam(param);
     slider.moveSlider(param);
    }
    return true;
   }).mouseup(function(){
    if(conf.start) {
     conf.start = false;
     var param = conf.currentPosition;
        if(conf.processParam) param = conf.processParam(param);
     slider.endSlider(param);
    }
    return true;
   });
   minEle.mousedown(function(){
    var param = conf.currentPosition-conf.interval;
    slider.setPosition(param);
    param = conf.currentPosition;
    if(conf.processParam) param = conf.processParam(param);
    slider.sacle(param);
    return false;
   });
   maxEle.mousedown(function(){
    var param = conf.currentPosition+conf.interval;
    slider.setPosition(param);
    param = conf.currentPosition;
    if(conf.processParam) param = conf.processParam(param);
    slider.sacle(param);
    return false;
   });
  }
  return {
   config:conf,
   setSliderPosition : function(param) {
    if(this.config.position) this.config.position(param);
   },
   startSlider:function(param) {
    if(this.config.startslide) this.config.startslide(param);
   },
   moveSlider:function(param) {
    if(this.config.moveslide) this.config.moveslide(param);
   },
   endSlider:function(param) {
    if(this.config.endslide) this.config.endslide(param);
   },
   setPosition:function(position) {
    if(position>this.config.length-12) position = this.config.length-12;
    else if(position < 0) position = 0;
    this.config.currentPosition = position;
    this.config.slidercontroller.css('left',position+"px");
   },
   sacle:function(param) {
    if(this.config.sacle) this.config.sacle(param);
   },
   init:function() {
    if(!this.initial) {
     createSlider(this);
     this.initial = true;
    }
    return this;
   }
  }.init();
}

$.fn.slider = function(conf) {
  if(!this.get(0).inital) {
   var slider = init(conf,this);
   this.get(0).slider = slider;
   this.get(0).inital = true;
  }
}

$.fn.setPosition = function(position) {
  this.get(0).slider.setPosition(position);
}
})(jQuery);

//html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Network focus</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<script type="text/javascript" src="./jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="./slider.js" ></script>
<link href="./master.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {

  $('#slider').slider({
   currentPosition:50,
   length:80,
   endslide:function(param) {
    alert(param)
   },
   sacle:function(param){
    alert(param)
   }

   });
  $('#slider').setPosition(30)
})

</script>
</head>
<body>


     <span id="slider" style="vertical-align: top;float:right;margin-right:10px;margin-top:-2px;background-color:gray;">
     </span>

</body>
</html>

//css

@charset "utf-8";
/* CSS Document */

/* slider add by fight at 2013年6月21日10:58:19*/
img.handtool {background:transparent url(./images/5.png);width:20px;height:19px;display:inline-block;position:relative;}
img.handedtool {background:transparent url(../images/hand_selected.png);width:15px;height:16px;}
.startmin {background:transparent url(./images/1.png) -6px -3px;width:20px;height:22px;border:none;padding:0px 0px !important;margin:0px 0px !important;display:inline-block;position:relative;cursor:hand;}
.startmin span {background:transparent url(./images/4.png) 1px -7px;width:15px;height:5px;border:none;padding:0px 0px !important;margin:0px 0px !important;display:inline-block;position:relative;margin-top:10px !important;margin-left:1px !important;}
.slidercontainer {background:transparent url(./images/9.png);width:154px;height:2px;padding:0px 0px !important;margin:0px 0px !important;display:inline-block;position:relative;vertical-align:middle;top:-2px;cursor:hand;}
.slidercontroller{background:transparent url(./images/3.png) -3px 0px;width:13px;height:16px;padding:0px 0px !important;margin:0px 0px !important;display:inline-block;position:relative;vertical-align:middle;top:-7px;left:0px;cursor:hand;}
.endmax {background:transparent url(./images/1.png) -6px -3px;width:20px;height:22px;border:none;padding:0px 0px !important;margin:0px 0px !important;display:inline-block;position:relative;cursor:hand;}
.endmax span {background:transparent url(./images/2.png);width:15px;height:18px;border:none;padding:0px 0px !important;margin:0px 0px !important;display:inline-block;position:relative;margin-top:3px !important;margin-left:2px !important;}