文档章节

一个支持IE的html滑动条

BryanYang
 BryanYang
发布于 2015/03/06 19:53
字数 162
阅读 742
收藏 4
<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>

效果图:


© 著作权归作者所有

BryanYang
粉丝 16
博文 165
码字总数 52036
作品 0
石景山
程序员
私信 提问
android开源项目框架大全:《IT蓝豹》

android开源项目框架大全: 1.多页切换TabHost 9 android-sticky-viewpager ViewPager带有粘性功能,常规的处理方法可能会超级复杂,因为涉及到大量的onTouch监听、拦截,滑动时因为效率问题...

抉择很难
2015/10/20
583
0
android开源项目框架大全:《IT蓝豹》

android开源项目框架大全: 1.多页切换TabHost 9 高仿网易云音乐客户端的Home页面切换Tabhost 高仿网易云音乐客户端的Home页面切换Tabhost,并且三角形是透明的,实现方式,自定义AnimTabsV...

抉择很难
2015/10/20
733
1
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3
终于学会怎么写后台侧列表(隐藏滚动条)

终于学会怎么写后台侧列表(隐藏滚动条) 首先一个标准后台程序有三部分组成: 顶部条 左侧列表 右侧正文内容 现在要求如下: 左侧列表可以滑动,但不可见滚动条 左侧列表滑动时,顶部条不能...

sizeof
2016/06/17
233
0
2016年最流行的Android组件、工具、框架大全

首发链接:2016年最流行的Android组件、工具、框架大全 Android 是目前最流行的移动操作系统之一。 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生了...

xhmj12
2016/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
44分钟前
4
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
54分钟前
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
6
0
从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
5
0
程序性能checklist

程序性能checklist

Moks角木
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部