JS-slider.js实现鼠标拖动滑块控制取值特效
制作效果,如下图,鼠标点击颜色标能左右拖动并设置文本框中的值

源码:
<div id="example">
<div id="slideContainer1">
<div id="slideHandle1"></div>
</div>
<div id="pos1"></div>
<div id="slideContainer2">
<div id="slideHandle2"></div>
</div>
<div id="pos2"></div> <script type="text/javascript">
window.addEvent('domready', function(){
var slider1 = new Slider('slideContainer1', 'slideHandle1',{onComplete: function(val){$('pos1').setHTML(val);}});
var slider2 = new Slider('slideContainer2', 'slideHandle2', {onTick: function(pos){this.knob.effect(this.p, {duration: 200, transition: Fx.Transitions.quadOut}).start(pos);
},onComplete: function(val){$('pos2').setHTML(val);},steps: 5});
});
</script>
</div>
引入的js
<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all"> <link href="slider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="slider.js"></script>
源码查看(转载)地址:http://www.xwcms.net/webAnnexImages/fileAnnex/20131220/85900/index.html
源码下载地址:点这里
JS-slider.js实现鼠标拖动滑块控制取值特效的更多相关文章
- js 定义像java一样的map方便取值【转】
js 定义像java一样的map方便取值. 百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...
- Handlebars.js中集合(list)通过中括号的方式取值
有这么一个需求,在一个table中,tr是通过each取值,取出的值要与table标题相对应,如何实现?例如: <table> <thead> <tr> {{#ea ...
- php+js实现极验,拖动滑块验证码验证表单
现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在 ...
- js 不常用面试题 数组对象深度取值
function getPersonInfo(one, two, three) { console.log(one); console.log(two); console.log(three); } ...
- 前端JS获取路由地址里的参数QueryString取值
参数的获取 声明一个函数 //参数name是路由参数 engNo function getQueryString(name) { var reg = new RegExp("(^|& ...
- JQuery常用的HTML页控制取值、赋值
1,关于tab页签 获取当前页签的属性: var tabsSelect=$("#easytabs").tabs("getSelected"); var titl ...
- 独立的js文件中不能使用EL表达式取值
在独立的js文件中写了一个EL表达式取值,发现没有取到值,原因在于不能在独立的js文件中使用EL表达式,可以在jsp页面定义全局变量,然后在js文件中引用
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
随机推荐
- java 22 - 11 多线程之模拟电影院售票口售票
使用多线程实现的第二种方式: 首先创建自定义类 public class SellTicket implements Runnable { // 定义100张票 private int ticket ...
- Xcode基本操作
2.偏好设置 通过“command+,”快捷键或”Xcode|Preferences”菜单呼出偏好设置. (1)主题及字体(Preferences->Fonts & Colors) 选中 ...
- CentOS RHEL 安装 Tomcat 7
http://www.davidghedini.com/pg/entry/install_tomcat_7_on_centos This post will cover installing and ...
- Cordova - 使用Cordova开发iOS应用实战5(获取手机里照片,并编辑)
使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运 ...
- CentOS 7.0 Nvidia显卡安装步骤
from: http://blog.sina.com.cn/s/blog_49c0985a0102v3fa.html CentOS 7.0 Nvidia显卡安装步骤: 1 在英伟达官网下载相应驱动 搜 ...
- Android -- View移动的六种方法
layout() 如果你将滑动后的目标位置的坐标传递给layout(),这样子就会把view的位置给重新布置了一下,在视觉上就是view的一个滑动的效果. public class DragView ...
- CentOS 7下的 Mysql 主从配置
最近在玩mysql主从配置,在此记录一下 一.前言 1.安装两个虚拟机(CentOS 7).iP分别是192.168.47.131 和192.168.47.133.其中192.168.47.133作为 ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- 翻译qmake文档 目录
利用空闲时间把qmke的文档翻译出来,翻译水平有限,有些地方翻译的不好,请谅解, 如果您能指出来,我会很感激并在第一时候做出修改. 翻译qmake文档(一) qmake指南和概述 翻译qmake文档( ...
- oracle 分组排序函数
项目开发中,我们有时会碰到需要分组排序来解决问题的情况:1.要求取出按field1分组后,并在每组中按照field2排序:2.亦或更加要求取出1中已经分组排序好的前多少行的数据 这里通过一张表的示例和 ...