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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
IE8 浏览器Cookie的处理
Jan 31 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
php接口隔离原则实例分析
2019/11/11 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
JS实现放烟花效果
2020/03/10 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python Tensor和Array对比分析
2020/01/08 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python 在局部变量域中执行代码
2020/08/07 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
三好学生评语大全
2014/12/29 职场文书
技术入股合作协议书
2016/03/21 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL