自写jQuery的滚动条Slider
2013-09-22 14:31
204 查看
/**
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;}
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;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
- jQuery滚动监听，实现商城楼梯式导航、滚动监听根据滚动条所处的位置来自动更新导航项
- Jquery滚动条事件的处理
- jquery 操作滚动条滚动 animate checkbox操作
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
- Getting started with the Nivo Slider jQuery Plugin
- 19个带示例的jQuery滚动条插件
- jquery监听滚动条，实现“返回顶部”
- jquery判断页面滚动条(scroll)是上滚还是下滚
- jquery 判断滚动条到达了底部和顶端的方法
- jquery操作与滚动条相关操作
- Flexslider - 响应式的 jQuery 内容滚动插件
- js与jquery获得页面大小、滚动条位置、元素位置
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- jQuery判断是否存在滚动条的简单方法
- jquery ValidationEngine 提示信息跟随滚动条滚动
- jQuery 入门教程(39): jQuery UI Slider 示例（二）
- jQuery实现滚动条向下拉到一定的程度，然后这层就一直占着不管滚动条如何向下拉都不动了的效果
- 分享一个最具有灵活性的jQuery幻灯插件 - Rhinoslider
- JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)