jQuery实现的支持IE的html滑动条


Posted in Javascript onMarch 16, 2015
<html>

<script type="text/javascript" src="jquery.js"></script>

<style>

.d_b{

    height: 20px;

    width: 10px;

    display: inline-block;

    background-color: black;

    position: relative;

    vertical-align: middle;

    top: -15px;

    left: -5px;

}

</style>

<div id="d" style="width:200px;cursor: pointer;" max=100 min=0 value=10 >

<div style="height:10px; width:100%; background-color:green" ></div>

<b class="d_b"></b>

</div>

<b id="text"></b>

<script>

var $dom = $(document);

$dom.on('mousedown','#d',function (argument) {

    $(this).data('mouse','down');

    console.log('down');

})

$dom.on('mouseup',function(){

    $('#d').data('mouse','up');

    console.log('up');

});

$dom.on('mousemove','#d',function(event){

    if($(this).data('mouse') == 'down'){

        var m_x = event.clientX;

        var d_b = $(this).find('.d_b');

        m_x = m_x < 8 ? 8 : m_x;

        m_x = m_x > 208 ? 208: m_x;

        d_b.css('left',m_x-13);

        var max = $(this).attr('max');

        $(this).attr('value', Math.floor((m_x-8)/200 * max))

        console.log($(this).attr('value'));

        $('#text').text($(this).attr('value'))

    }

});

</script>

</html>

效果图:

jQuery实现的支持IE的html滑动条

以上就是本文的全部内容了,希望能够对大家学习使用jQuery有所帮助。

Javascript 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 #Javascript
nw.js实现类似微信的聊天软件
Mar 16 #Javascript
JavaScript控制table某列不显示的方法
Mar 16 #Javascript
详解addEventListener的三个参数之useCapture
Mar 16 #Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 #Javascript
jquery中radio checked问题
Mar 16 #Javascript
jquery中JSON的解析方式
Mar 16 #Javascript
You might like
PHP禁止页面缓存的代码
2011/10/23 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
JS查看对象功能代码
2008/04/25 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python脚本设置超时机制系统时间的方法
2016/02/21 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python中的self用法详解
2019/08/06 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
信息技术教学反思
2014/02/12 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
体育馆的标语
2014/06/24 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
十八大宣传标语
2014/10/09 职场文书