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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
JavaScript类库D
Oct 24 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
Vue.js的复用组件开发流程完整记录
Nov 29 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Jquery $.map使用方法实例详解
2020/09/01 jQuery
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
基于python操作ES实例详解
2019/11/16 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
JDO的含义
2012/11/17 面试题
项目合作协议书范本
2014/04/16 职场文书
10的分与合教学反思
2014/04/30 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
商场促销活动总结
2014/07/10 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Spring实现内置监听器
2021/07/09 Java/Android