JS-slider.js实现鼠标拖动滑块控制取值特效
2015-06-19 13:25
741 查看
制作效果,如下图,鼠标点击颜色标能左右拖动并设置文本框中的值
源码:
引入的js
源码查看(转载)地址:http://www.xwcms.net/webAnnexImages/fileAnnex/20131220/85900/index.html
源码下载地址:点这里
源码:
<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
源码下载地址:点这里
相关文章推荐
- javascript操作DOM的方法与属性
- 把 JSON 文本转换为 JavaScript 对象时可能出现的问题
- JavaScript 闭包
- Js setInterval使用
- js数组
- js 取整
- JS array 数组详解
- crockford总结的精华版javascript
- javascript 简单高效判断数据类型
- javascript与html代码相结合的方式
- jsp的两种开发模式
- js 生成随机数
- JS中关于in运算符
- javascript 数据类型转换(parseInt,parseFloat)
- js判断客户端设备类型
- json 串排序 遇到的问题 安照日期倒序 等解决 (按照里面日期字段倒序)
- js常用DOM操作
- 一个不错的js loading源码
- javascript返回顶部插件+源码
- 使用grunt构建seajs教程一