html5音量調節器鼠標拖動控制音量調節器代碼



104 414 139



特效描述:html5 音量調節器 鼠標拖動 控制音量調節器,html5音量調節器

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

2. 引入JS

<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src='js/TweenLite.min.js'></script>
<script type="text/javascript" src='js/Draggable.min.js'></script>
<script type="text/javascript" src='js/CSSPlugin.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

3. HTML代碼

<div id="icon" class="icon">
	<svg class="outline" viewBox="0 0 216 216" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
		<defs>
		  <linearGradient x1="16.291%" y1="13.917%" x2="88.893%" y2="80.425%" id="a">
			  <stop stop-color="#B0DBDD" offset="0%"/>
			  <stop stop-color="#0AA3C9" offset="100%"/>
		  </linearGradient>
		</defs>
		<g fill="none" fill-rule="evenodd">
			<path d="M10 108c0-54.124 43.876-98 98-98s98 43.876 98 98-43.876 98-98 98-98-43.876-98-98z" stroke="rgba(0,0,0,.4)" stroke-width="6"/>
			<path id="path" class="path" d="M10 108c0-54.124 43.876-98 98-98s98 43.876 98 98-43.876 98-98 98-98-43.876-98-98z" stroke="url(#a)" stroke-width="4"/>
		</g>
	</svg>
	<div class="wheel">
		<div id="indicator" class="indicator"></div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 圖片拖動 圖片拖拽 按鈕控制 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子