JS特效-鼠标事件-进度条

最新推荐文章于 2022-06-19 09:53:20 发布

Web-once

最新推荐文章于 2022-06-19 09:53:20 发布

阅读量841

点赞数 3

文章标签： JS特效进度条鼠标事件

本文链接：https://blog.csdn.net/qq_42381297/article/details/82595467

版权

这是今天写的进度条案例，主要用到了鼠标事件，分享出来给大家~<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>进度条</title> <style> #progress{ width: 1000px; h

摘要由CSDN通过智能技术生成

这是今天写的进度条案例，主要用到了鼠标事件，分享出来给大家~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>进度条</title>
	<style>
	#progress{
		width: 1000px;
		height: 35px;
		line-height: 35px;
		margin: 100px auto;
		position: relative;
	}
	#progress_bar{
		width: 900px;
		height: 100%;
		background: #e8e8e8;
		border-radius: 8px;
	}
	#progress_bar_fg{
		width: 0;
		height: 100%;
		background: orange;
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}
	span{
		position: absolute;
		top: -7px;
		left: 0;
		width: 30px;
		height: 49px;
		background: orange;
		border-radius: 5px;
		cursor: pointer;
	}
	#progress_value{
		position: absolute;
		right: 30px;
		top: 0;
	}
	</style>
</head>
<body>

<div id="progress">
	<div id="progress_bar">
		<div id="progress_bar_fg"></div>
		<span></span>
	</div&g

最低0.47元/天解锁文章

Web-once

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS特效-鼠标事件-进度条

这是今天写的进度条案例，主要用到了鼠标事件，分享出来给大家~&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;进度条&lt;/title&gt; &lt;style&gt; #progress{ width: 1000px; h
复制链接

扫一扫