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 ...
随机推荐
- Linux下mysql新建账号及权限设置
http://www.cnblogs.com/eczhou/archive/2012/07/12/2588187.html 1.权限赋予 说明:mysql部署在服务器A上,内网上主机B通过客户端工具连 ...
- NOI2004 郁闷的出纳员
Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经常 ...
- .Net程序员学习Linux最简单的方法
有很多关于Linux的书籍,博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...
- Linux socket多进程服务器框架三
在使用select管理服务器连接的时候: 注意1:select是可中断睡眠函数,需要屏蔽信号 注意2:必须获取select的返回值nread,每次处理完一个事件,nread需要-1 注意3:如果客户端 ...
- opencv6.1-imgproc图像处理模块之平滑与形态学操作
这个部分是<opencv-tutorials.pdf>的部分,这部分也是几大部分中例子最多的,其实这个教程的例子都很不错,不过有些看得出来还是c接口的例子,说明例子有些年头了,其实在&qu ...
- Code First操作Mysql数据库
前面博客也讲了,自己做一个网站,选用的是MVC+EF Code First+MySql+EasyUI,先说下技术选型.一.为什么选择MVC? 因为之前自己做的系统大部分是webForm,MVC的之前也 ...
- grootjs 简明教程
grootJs简明教程 mvvm框架也是解决的一类问题,在某些时候会提高生产效率: 经过接近一个月的努力,grootJs测试版终于发布了 grootJs是一个mvvm的框架,名字取 grass 和ro ...
- 用 canvas 做个好玩的网站背景
不知不觉又好久没更过博客了,老调新弹一下,之前做的一个小效果,觉得蛮有意思的,也有朋友问是怎么做的,就分享一下,写个博文吧. 先上demo吧:http://whxaxes.github.io/canv ...
- .Net简单图片系统-简介
系统简介 最近做了一个简单图片系统,这个系统就是 将上传的的图片保存到系统本地文件系统或者基于fastdfs的分布式文件系统中,在查看图片时会直接请求此系统或者fastdfs的tracker服务器(需 ...
- 替罪羊树模板(BZOJ1056/1862)
#include<cstdio> #include<cstring> #include<cmath> #include<iostream> #defin ...