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

源码:

        <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. Android中常用的布局

    一般分为5大类. Android中所有的空间第一字母都是大写 1.线性布局 LinearLayout 2.相对布局 RelativeLayout 3.帧布局--分层显示  FrameLayout 4. ...

  2. linux下内网端口转发工具:linux版lcx [实现远程内网维护]

    这个工具以前使用的初衷是内网渗透,需要将内网ssh端口转发到外网服务器上.但这个工具同样适用于运维工程师进行远程内网维护. 当然这一切的前提是内网可以访问外网,检测方法当然就是直接ping 一个外网I ...

  3. webpack webpack-dev-server使用指南

    webpack-dev-server插件可以实现webpack的自动编译刷新 项目结构 pockage.js { "name": "webpack", &quo ...

  4. Linux 网络编程详解三(p2p点对点聊天)

    //p2p点对点聊天多进程版--服务器(信号的使用) #include <stdio.h> #include <stdlib.h> #include <string.h& ...

  5. ORACLE 定时执行存储过程

    推荐用dbms_scheduler方式更好 (2012-11-19注) /* 查询: select job,broken,what,interval,t.* from user_jobs t; job ...

  6. Notes on Convolutional Neural Networks

    这是Jake Bouvrie在2006年写的关于CNN的训练原理,虽然文献老了点,不过对理解经典CNN的训练过程还是很有帮助的.该作者是剑桥的研究认知科学的.翻译如有不对之处,还望告知,我好及时改正, ...

  7. UC~移动端的IE!!!坑总结

    1.接入过WAP版支付宝支付的应该会发现,支付宝页面在UC中巨丑,完全就是诺基亚时代的网页.你可能会怪它是支付宝的问题吧.但你用QQ浏览器打开,很好啊:你在电脑用火狐.Chrome打开都很好啊:那你试 ...

  8. 用 Smarty 生成静态页面入门介绍

    why Smarty? 随着公司首页(以下简称首页)流量越来越大,最近开始考虑使用后台语言生成静态页面的技术. 我们知道,一个简单页面一般是一个 .html(或者 .htm ..shtml)后缀的文件 ...

  9. 深入理解OOP(第一天):多态和继承(初期绑定和编译时多态)

    在本系列中,我们以CodeProject上比较火的OOP系列博客为主,进行OOP深入浅出展现. 无论作为软件设计的高手.或者菜鸟,对于架构设计而言,均需要多次重构.取舍,以有利于整个软件项目的健康构建 ...

  10. KM模板

    var n,m,i,j:longint; ans:int64; sel,lx,ly,slack:..] of int64; a:..,..] of int64; visx,visy:..] of bo ...