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

最新推荐文章于 2024-03-15 09:33:44 发布

转载最新推荐文章于 2024-03-15 09:33:44 发布 · 887 阅读

1 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

本文介绍了一种使用MooTools库实现的滑块控件与文本框联动的方法，通过拖动滑块，可以实时更新文本框中的数值，适用于网页中需要调整参数的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

源码：

        <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>