<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为HTML5+CSS3音量调节旋转按钮，属于站长常用代码，更多其他代码代码请访问模板在线JS代码频道。" />
<title>HTML5+CSS3音量调节旋转按钮_模板在线</title>
<link href="css/htmldivcss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<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>
<script src='js/jquery.js'></script>
<script src='js/TweenLite.min.js'></script>
<script src='js/Draggable.min.js'></script>
<script src='js/CSSPlugin.min.js'></script>
<script src="js/index.js"></script>
<!-- 代码 结束 -->
<h1>鼠标按住中间的按钮拖动查看效果</h1>
<h4>
<p>来源：<a href="http://www.htmldivcss.com/" target="_blank">模板在线</a> 代码整理：<a href="http://www.htmldivcss.com/" target="_blank">模板在线</a> 感谢：<a href="http://zheye.cc/" target="_blank">折页网</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p>HTML5+CSS3音量调节旋转按钮，鼠标按住中间的按钮拖动查看效果，兼容主流浏览器，模板在线推荐下载！</p><p><br /></p><p>使用方法：</p><p>1、在head区域引入样式表文件htmldivcss.css</p><p>2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可</p><p>3、在网页中引入JS，注意文件名的大小写。</p></p>
<p style="margin:20px 0"></p>
</h4>
</body>
</html>
