Rumah > hujung hadapan web > html tutorial > 一个支持IE的html滑动条_html/css_WEB-ITnose

一个支持IE的html滑动条_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:48:40
asal
917 orang telah melayarinya

<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>
Salin selepas log masuk

效果图:


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan