JS-slider.js实现鼠标拖动滑块控制取值特效

时间：2015-06-19 14:55:39 收藏：0 阅读：1161

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

技术分享

源码：

        <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

源码下载地址：点这里

原文：http://www.cnblogs.com/hwaggLee/p/4588389.html