Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-24 11:48:40
original
907 Les gens l'ont consulté

<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>
Copier après la connexion

效果图:


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal