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 相关文章推荐
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
轮播图组件js代码
Aug 08 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Javascript创建类和对象详解
May 31 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python把转列表为集合的方法
2019/06/28 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
亿企通软件测试面试题
2012/04/10 面试题
2014年公司植树节活动方案
2014/03/04 职场文书
总经理任命书
2014/03/29 职场文书
减负增效提质方案
2014/05/23 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
人口与计划生育责任书
2015/05/09 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Python中npy和mat文件的保存与读取
2022/04/24 Python