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

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

源码:

        <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

源码下载地址:点这里

时间: 2024-11-09 05:03:59

JS-slider.js实现鼠标拖动滑块控制取值特效的相关文章

js 定义像java一样的map方便取值

js 定义像java一样的map方便取值. 百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map var map = {}; var key0 = '0'; var key1 = '1'; map[key0] = '0-真实报文'; map[key1] = '1-虚拟报文'; //row 获取这行的值 ,index 获取索引值 function testJsMap(key){ //如果遍历map for(

锐浪 报表, 当多行交叉报表时,对多行交叉报表中自由格中的多个字段控件,进行颜色控制. 取值 判断等实现

需要注意的点是: 1 . 要对自由格中对应的 字段框的背景填充方式改为:填充,否则没有效果. 2 . 代码中红色部门代码: Column 为明细网络对象属性中的 列集合 中的 交叉列的 名称,  Report.RunningDetailGrid.Columns.Item("Column_2") 3.  蓝色部门 为自由格中 控件的索引位置 ,也可以根据字段框的名称来进行控制如:  contentCell.Controls.Item("FieldBox8") 代码如下

简单的鼠标拖动效果

使用js实现简单的鼠标拖动效果,但此部分代码有个小小的BUG,后期改进好我会写进来,但基本的效果已经实现,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移动</title> <style> #box{ width: 50px; height: 50px; position:

js鼠标控制图片的特效,滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {

原生js实现拖动滑块验证

拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .drag{position: relative;

js鼠标拖动图片360度平面旋转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

基于js鼠标拖动图片排序

分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul id="ul1"> <li> <img src="images/1.jpg" width="200" height="150" />&l

CSS+JS的拖动滑块实现价格区间搜索效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS鼠标拖动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标拖动</title> &l