制作效果,如下图,鼠标点击颜色标能左右拖动并设置文本框中的值

源码:

        <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实现鼠标拖动滑块控制取值特效的更多相关文章

  1. js 定义像java一样的map方便取值【转】

    js 定义像java一样的map方便取值.  百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...

  2. Handlebars.js中集合(list)通过中括号的方式取值

    有这么一个需求,在一个table中,tr是通过each取值,取出的值要与table标题相对应,如何实现?例如: <table> <thead> <tr> {{#ea ...

  3. php+js实现极验,拖动滑块验证码验证表单

    现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在 ...

  4. js 不常用面试题 数组对象深度取值

    function getPersonInfo(one, two, three) { console.log(one); console.log(two); console.log(three); } ...

  5. 前端JS获取路由地址里的参数QueryString取值

    参数的获取 声明一个函数 //参数name是路由参数 engNo function getQueryString(name) { var reg = new RegExp("(^|& ...

  6. JQuery常用的HTML页控制取值、赋值

    1,关于tab页签 获取当前页签的属性: var tabsSelect=$("#easytabs").tabs("getSelected"); var titl ...

  7. 独立的js文件中不能使用EL表达式取值

    在独立的js文件中写了一个EL表达式取值,发现没有取到值,原因在于不能在独立的js文件中使用EL表达式,可以在jsp页面定义全局变量,然后在js文件中引用

  8. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  9. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

随机推荐

  1. C# Enum 进行逻辑运算

    Enum定义 enum 全称(Enumeration),即一种由一组称为枚举数列表的命名常量组成的独特类型. 通常情况下,最好是在命名空间內直接定义 enum,以便该命名空间中所有的类都能够同样方便地 ...

  2. pitch yaw roll 的区别

    http://blog.163.com/vipwdp@126/blog/static/150224366201281935518196/

  3. No2. S2错题本

    ---恢复内容开始--- 正确答案:D,因为isFormField()是FileItem类的方法 正确答案:C,因为当//1处代码执行后,第0项就删除了,那么list.Add(1)内的对象就会自动补位 ...

  4. [USACO1.1]坏掉的项链Broken Necklace

    题目描述 你有一条由N个红色的,白色的,或蓝色的珠子组成的项链(3<=N<=350),珠子是随意安排的. 这里是 n=29 的二个例子: 第一和第二个珠子在图片中已经被作记号. 图片 A ...

  5. NOIP模拟赛 隔壁

    问题描述: 隔壁学校地形图可以通过一个高度矩阵表示,矩阵中每一个位置都有一个数0<=hij<=10^5表示这个坐标的海拔,我们姑且将其称为海拔图,容易发现,我们可以通过这个矩阵轻松算出隔壁 ...

  6. LINQ 常见用法

    以下数据源都假设为data 1.获取某列的不重复数据 List<int> ids =  data.Select(t => t.ID).Distinct().ToList(); 2.对 ...

  7. 带参数的CLR存储过程

    昨天有学习<简单创建与布署CLR存储过程>http://www.cnblogs.com/insus/p/4371762.html,知道怎样创建以及布署至SQL中去. 下面这个范例是实现CL ...

  8. C#.NET 大型通用信息化系统集成快速开发平台 4.0 版本 - 组织机构的名称编号是否允许重复?

    通常情况下,一个公司内部的部门名称,编号是不可能重复的.但是是在多公司的情况下,很可能有部门名称重复的问题存在,这时需要允许部门名称重复. 例如一个大型IT公司,在2个地区都有研发部或者客户服务部,这 ...

  9. CodeDom

    细说CodeDom 在上一篇文章中,老周厚着脸皮给大伙介绍了代码文档的基本结构,以及一些代码对象与CodeDom类型的对应关系. 在评论中老周看到有朋友提到了 Emit,那老周就顺便提一下.严格上说, ...

  10. Iptables 报错Couldn't load target `ACCET':/lib64/xtables/libipt_ACCET.so: cannot open shared object file

    [root@xxxx ~]# /etc/init.d/iptables restart iptables: Setting chains to policy ACCEPT: filter nat [ ...