简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-24 11:48:40
Original
874 people have browsed it

<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>
Copy after login

效果图：


Related labels：
一个支持IE的html滑动条
source：php.cn
Previous article：[原创]基于html5新标签canvas写的一个小画板_html/css_WEB-ITnose Next article：CSS ul li a 背景图片与文字对齐_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Is it possible to achieve a smooth transition from text drawn in one color to an animated gradient? There is white text on the page and a button below it. Additionally, animated gradients ar...
From 2023-09-16 09:22:05
0
1
459
Hide and show animated content: Create HTML pages with transition effects I'm trying to make a website that displays content in book form, with page-turning animati...
From 2023-09-10 17:41:45
0
1
287
In the html-css file, some styles are not called. Is there any tool to delete this part of the content that is not called? For example: html content: {code...} In css file: {code...} There is no tool or plug-in (v...
From 2017-05-24 11:36:01
0
1
589
ios - Horizontal sliding issue with view on top The problem is this: 1. There is a calendar control at the top, a tab below the calendar c...
From 2017-05-17 10:05:06
0
2
544
vue.js - nginx determines whether the IE browser is below 10. http_user_agent rewrites to a page prompt. The company uses Vue. Single page... Vue does not support browsers below IE9. So I want ng...
From 2017-05-16 17:07:35
0
2
979
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！