<html>
<head>
<title>slider tests</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
* Uestc
* [url]www.stuhome.net[/url]
*/
function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
};
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//为元素添加事件
function AddObjectEvent(targetObj,eventName,eventFunc)
{
if(typeof targetObj == "string")
targetObj = $(targetObj);
if(targetObj)
{
if(targetObj.attachEvent)
{
targetObj.attachEvent(eventName,eventFunc);
}
else if(targetObj.addEventListener)
{
eventName = eventName.toString().replace(/on(.*)/i,'$1');
targetObj.addEventListener(eventName,eventFunc,true);
}
}
}
function MakeSlider(track,slider,iniPos,OnMoveFunc,OnUpFunc){
if(typeof track == "string")
track = $(track);
if(typeof slider == "string")
slider = $(slider);
if(!slider||!track) return;
var preLocation = iniPos;
var MethodOnMove = OnMoveFunc?OnMoveFunc:function(){};
var MethodOnUp = OnUpFunc?OnUpFunc:function(){};
var iMouseDown = false;
var sliderObj = null;
var trackObj = null;
var preMousePos = null;
var slideRange = {min:null,max:null};
var prePosition = getPosition(slider);
slideRange.min = getPosition(track).x;
slideRange.max = getPosition(track).x+track.offsetWidth;
var lengthTrack = track.offsetWidth;
var lengthSlider = slider.offsetWidth;
var outInterface = preLocation;
slider.style.position = "relative";
var OnLoad = function(){
slider.style.left = (lengthTrack*preLocation-lengthSlider/2).toString()+"px";
ReLocate();
};
slider.onmousedown = function(ev){
ev = ev||window.event;
iMouseDown = true;
sliderObj = this;
trackObj = track;
mouseOffset = getMouseOffset(this, ev);
preMousePos = mouseCoords(ev);
return false;
};
var CheckOut = function(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
if(mousePos.x<=(slideRange.min+mouseOffset.x))
return 1; //左边超界
if(mousePos.x>=(slideRange.max-(slider.offsetWidth - mouseOffset.x)))
return 2; //右边超界
return 0; //没有超界
};
var OnSliding = function(ev){
if(!iMouseDown||!sliderObj)return;
ev = ev || window.event;
var mousePos = mouseCoords(ev);
var out = CheckOut(ev);
if(0 != out){
if(1 == out){
sliderObj.style.left = "0px";
outInterface = 0;
}
else if(2 == out){
sliderObj.style.left = (lengthTrack-lengthSlider)+"px";
outInterface = 1;
}
MethodOnMove(outInterface);
return false;
}
if(sliderObj){
var reSliderLeft = mousePos.x - slideRange.min - mouseOffset.x;
sliderObj.style.left = (reSliderLeft)+"px";
outInterface = reSliderLeft/(lengthTrack-lengthSlider);
MethodOnMove(outInterface);
}
if(trackObj || sliderObj)
return false;
}
var OnSlideEnd = function(ev){
if(sliderObj||trackObj){
sliderObj = null;
trackObj = null;
iMouseDown = false;
MethodOnUp(outInterface);
}
}
var OnTrackDown = function(ev){
var mousePos = mouseCoords(ev);
slider.style.left = (mousePos.x - slideRange.min - slider.offsetWidth/2)+"px";
ReLocate();
outInterface = parseInt(slider.style.left.match(/(\d)+/))/(lengthTrack-lengthSlider);
MethodOnUp(outInterface);
};
var ReLocate = function(){
if(slider.style.left.indexOf("-") >= 0)
slider.style.left = "0px";
else if(parseInt(slider.style.left.match(/(\d)+/)) >= (lengthTrack-lengthSlider))
slider.style.left = (lengthTrack-lengthSlider)+"px";
};
AddObjectEvent(document,"onmousemove",OnSliding);
AddObjectEvent(document,"onmouseup",OnSlideEnd);
AddObjectEvent(track,"onclick",OnTrackDown);
AddObjectEvent(window,"onload",OnLoad);
}
//-->
</SCRIPT>
</head>
<body>
<div id="track1" style="width:200px;background-color:#aaa;height:10px;">
<div id="handle1" style="width:5px;height:10px;background-color:#ff0000;"></div>
</div>
<p id="debug1"> </p>
<script>
MakeSlider('track1','handle1',0.5,function(v){$('debug1').innerHTML='滑动: '+v},function(v){$('debug1').innerHTML='结束: '+v});
</script>
</body>
</html>
分享到：
相关推荐
这个"格区间滑块拖动代码"是基于jQuery库构建的，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。使用jQuery，开发者可以编写出简洁、高效的代码，同时保证良好的...
【标题】中的“jQuery价格区间拖动滑块代码”指的是一个使用jQuery库实现的交互式功能，它允许用户通过拖动滑块来选择一个价格范围。这种功能常见于电子商务网站的商品筛选部分，用户可以根据自己的预算设定价格上限...
首先，滑块验证码的基本原理是提供一个带有缺口的图片，用户需要通过移动滑块来拼合图片，完成验证。这个过程涉及到以下几个关键组件： 1. **图片生成**：滑块验证码通常需要动态生成难以被机器识别的图片，可以...
在压缩包中，"说明.htm"可能是详细的使用指南或者示例代码，而"jiaoben5484"可能是一个JavaScript文件，包含了具体的滑块按钮实现代码。为了充分利用这个工具，开发者需要阅读"说明.htm"来了解如何将代码整合到自己...
"jQuery拖动滑块时间轴选择日期代码"是一个实用的JavaScript插件，它允许用户通过拖动滑块在时间轴上直观地选择日期。这个功能常见于日程安排、事件管理或数据分析等场景，极大地提高了用户的操作体验。 首先，我们...
本资源“jQuery月供首付滑块选择代码.zip”提供了一种利用jQuery实现的自定义滑块选择器，主要用于在网页上创建一个可以动态调整首付和月供价格范围的表单元素。这个功能对于房地产、汽车销售或其他需要用户输入金融...
在这个压缩包中，开发者提供了一个实现刻度标尺滑块功能的代码示例，适用于网页交互元素的创建，尤其在需要用户输入数值范围时十分常见。 **JavaScript** 是一种轻量级的解释型编程语言，广泛应用于Web页面和应用的...
通过使用jQuery，开发者可以更高效地编写跨浏览器的JavaScript代码。 在移动端滑块实现中，jQuery提供了`touchstart`, `touchmove`, 和 `touchend`事件，这些事件对应于触摸开始、移动和结束的动作。开发者需要监听...
这种验证方式要求用户手动将一个可拖动的图像块（通常是滑块）拖动到正确的位置，与背景图像拼合，从而完成验证。 在HTML5和Canvas技术的支持下，我们可以利用JavaScript来创建这样一个验证系统。首先，我们需要...
10. **JavaScript逻辑**（js/jquery-range.js）：这个文件包含了实现拖动滑块选择日期的主要JavaScript代码。它可能包含了初始化滑块、绑定事件处理器、计算日期等功能。 总体来说，这个组件融合了前端开发的多个...
"jQuery鼠标拖动滑块选值代码"是一个典型的例子，它利用jQuery实现了用户可以通过鼠标拖动滑块来选择数值的功能，同时也支持点击滑杆或直接在输入框输入数值。这种功能常见于各种设置面板、游戏控制或数据调整场景。...
本示例“jQuery滑块拖动百分比代码”利用jQuery的功能实现了一个交互式的滑块，该滑块可以显示所选值的百分比，并且随着滑块的拖动实时更新。下面我们将深入探讨这个功能的实现原理和相关知识点。 首先，jQuery滑块...
本文实例为大家分享了JavaScript实现登录滑块验证的具体代码，供大家参考，具体内容如下 html代码 <div class="login-select"> <div v-show="errselectFlag" id="err-select"></div> 按住滑块，拖拽验证</p> ...
在本项目中，我们将探讨如何使用JavaScript（js）、CSS（层叠样式表）和HTML（超文本标记语言）来实现一个简单的滑块验证网页。 首先，HTML是网页的基础结构，我们需要创建一个包含滑块和验证区域的基本框架。以下...
文件"jiaoben4936"可能是JavaScript代码的实现，而"说明.htm"则可能包含了一个演示此功能的网页，以及对如何使用和自定义这个代码的说明。 总的来说，这个压缩包提供了一种创新的HTML5应用，展示了如何利用...
在这个项目中，我们将深入探讨如何使用jQuery和CSS3来创建一个具有回调函数的滑块开关按钮。 ### 1. HTML结构 在`index.html`文件中，滑块开关的基本HTML结构通常包含一个`<input>`元素，类型为`checkbox`，以及一...
在本文中，我们将深入探讨如何实现一个基于jQuery的阿里云滑块拖动验证代码，这是一种常见于网页登录界面的安全验证机制。首先，我们要理解这个验证系统的基本原理：它要求用户通过拖动滑块来完成一个预设的图像拼图...
6. **AJAX请求**：在某些实现中，滑块验证可能会发送一个异步请求（AJAX）到服务器，验证用户滑动操作的正确性，以确保安全。 7. **响应式设计**：为了适应不同设备和屏幕尺寸，代码可能还包含了响应式设计，确保在...
【jQuery全屏横向时间轴滑块代码】是一个基于JavaScript库jQuery实现的动态展示时间线的交互式设计。这种设计常用于展示项目历程、历史事件或者重要时间点，它以全屏模式呈现，使得用户可以清晰地看到每一个时间点的...
在提供的压缩包中，可能有一个名为"js"的文件，这通常包含实现这种复杂交互逻辑的JavaScript代码。代码可能包括以下几个关键部分： 1. **DOM操作**：首先，JavaScript需要获取HTML中的滑块元素，并创建额外的游标。...