IDC网站jQuery鼠标拖动计量代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 IDC网站jQuery鼠标拖动计量代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IDC网站jQuery鼠标拖动计量代码</title>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/FengBragBar.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
	<h1>FengBragBar jQuery 鼠标拖动计量 Demo</h1>
	<p>最近几年，很多IDC网站，都会有这种拖动计量的设计。方便用户录入所需要的配置。我很感兴趣，所以自己写了一个DEMO</p>
	<p>在DEMO结构上，它主要有四个东西组成，计量条背景，已选中计量条，拖动点，以及输出文本的显示框。</p>
	<p>学习重点有，如何获取鼠标的位置，如何模拟制作鼠标拖动事件（默认是没这个事件的。）</p>
</div>

<div id="main">
	<div id="bar_bg">
		<div id="bar_click"></div>
		<div id="bar_percent"></div>
	</div>
	<div id="bar_input"></div>
</div>
</body>
</html>

JS代码(FengBragBar.js):

/******************************************************************* * @authors FengCms * @web http://www.fengcms.com * @email web@fengcms.com * @date2014年12月10日 17:12:25 * @version FengBragBar Beta 1.0 * @copyCopyright © 2013-2018 Powered by DiFang Web Studio *******************************************************************/
$(function(){
	var BarB = $("#bar_bg"),BarC = $("#bar_click"),BarP = $("#bar_percent"),BarI = $("#bar_input"),BarBW = BarB.width(),BarCMove=false,BarCX;
	BarC.mousedown(function(e){
	BarCMove=true;
	var BarBX = parseInt(BarC.css("left"));
	BarCX=e.pageX-BarBX;
}
);
	$(document).mousemove(function(e){
	if(BarCMove){
	var PageX = e.pageX;
	var CX=PageX-BarCX;
	if(CX<=0){
	CX=0}
else if(CX>=BarBW){
	CX = BarBW}
else{
	CX = PageX - BarCX;
}
;
	BarC.css({
	"left":CX}
);
	BarP.css({
	"width":parseInt(CX/BarBW*100)+"%"}
);
	BarI.text(parseInt(CX)+"MB");
}
}
).mouseup(function(){
	BarCMove=false;
}
);
}
);

CSS代码(style.css):

@charset "UTF-8";/* reset */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption{font-size:1em;font-weight:normal;font-style:normal;}
fieldset,iframe,img{border:none;}
caption,th{text-align:left;}
table{border-collapse:collapse;border-spacing:0;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption{display:block;}
ul,li,ol,dl,dt,dd{list-style:none;}
/*scrollbar*/
html{scrollbar-face-color:#97aac1;scrollbar-highlight-color:#ffffff;scrollbar-3dlight-color:#97aac1;scrollbar-darkshadow-color:#97aac1;scrollbar-shadow-color:#ffffff;scrollbar-arrow-color:#ffffff;scrollbar-track-color:#d7e0eb;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb{border-radius:999px;border:0px solid transparent;}
::-webkit-scrollbar-track{box-shadow:1px 1px 5px rgba(100,100,100,.7) inset;}
::-webkit-scrollbar-thumb{min-height:20px;background-clip:content-box;box-shadow:0 0 0 5px rgba(100,100,100,.5) inset;}
::-webkit-scrollbar-corner{background:;transparent}
/*baes*/
body{font-family:tahoma,"\5B8B\4F53";font-size:12px;color:#555;}
h1,h2,h3,h4,h5,h6{font-family:tahoma,"\5FAE\8F6F\96C5\9ED1";}
img{border:none;}
a{text-decoration:none;color:#f60;font-weight:bold;}
a:hover{text-decoration:underline;color:#06f;}
a:focus,input:focus{outline:none;}
a *{cursor:pointer;}
.gehang{height:20px;width:20px;clear:both;}
/* 网站局中盒子样式 */
.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}
#main{width:500px;margin:100px auto;user-select:none;}
#bar_bg{height:14px;width:500px;border-radius:7px;background:#e8e8e8;position:relative;}
#bar_click{height:20px;width:20px;border-radius:10px;background:#06f;margin-left:-10px;position:absolute;top:-3px;left:0;cursor:pointer;box-shadow:0 0 4px #000;border:1px solid #5c9dff;}
#bar_percent{height:14px;border-radius:7px;background:#f60;width:0;}
#bar_input{padding-top:20px;font-size:18px;}
.main{width:600px;margin:auto;}
.main h1{text-align:center;font-size:24px;padding:20px 0;color:#f60;}
.main p{text-indent:2em;line-height:2;padding:5px 0;}
#copy{width:600px;margin:auto;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)