jQuery目标动态温度计

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

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

以下是 jQuery目标动态温度计的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		
		<!--css just for the preview-->
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
        
        <!--copy this code into your header-->
        <link href="css/goal-thermometer.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            var currentAmount = 1367;
        </script>
        <script src="js/jquery-latest.js"></script>
        <script type="text/javascript" src="js/goal-thermometer.js"></script>
        <!--end copy-->
        <title>jQueryĿ�궯̬�¶ȼ�</title>
	</head>
	<body>
	    <div id="centered">
	        <!--add this line to the html where you want the thermometer-->
    		<div id="goal-thermometer"></div>
		</div>
	</body>
</html>

JS代码(goal-thermometer.js):

/** * @author Lance Snider - lance@lancesnider.com*/
//editable varsvar goalAmount = 2000;
	//how much are you trying to get//var currentAmount = 1267;
	//how much do you currently have (if you want to define in js,not html)var animationTime = 3000;
	//in millisecondsvar numberPrefix = "$";
	//what comes before the number (set to "" if no prefix)var numberSuffix = "";
	//what goes after the numbervar tickMarkSegementCount = 4;
	//each segement adds 40px to the heightvar widthOfNumbers = 50;
	//the width in px of the numbers on the left//standard resolution imagesvar glassTopImg = "images/glassTop.png";
	var glassBodyImg = "images/glassBody.png";
	var redVerticalImg = "images/redVertical.png";
	var tooltipFGImg = "images/tickShine.png";
	var glassBottomImg = "images/glassBottom.png";
	var tootipPointImg = "images/tooltipPoint.png";
	var tooltipMiddleImg = "images/tooltipMiddle.png";
	var tooltipButtImg = "images/tooltipButt.png";
	//high res imagesvar glassTopImg2x = "images/glassTop2x.png";
	var glassBodyImg2x = "images/glassBody2x.png";
	var redVerticalImg2x = "images/redVertical2x.png";
	var tooltipFGImg2x = "images/tickShine2x.png";
	var glassBottomImg2x = "images/glassBottom2x.png";
	var tootipPointImg2x = "images/tooltipPoint2x.png";
	var tooltipMiddleImg2x = "images/tooltipMiddle2x.png";
	var tooltipButtImg2x = "images/tooltipButt2x.png";
	/////////////////////////////////////////// ------ don't edit below here ------ ///////////////////////////////////////////var arrayOfImages;
	var imgsLoaded = 0;
	var tickHeight = 40;
	var mercuryHeightEmpty = 0;
	var numberStartY = 6;
	var thermTopHeight = 13;
	var thermBottomHeight = 51;
	var tooltipOffset = 15;
	var heightOfBody;
	var mercuryId;
	var tooltipId;
	var resolution2x = false;
	//start once the page is loaded$( document ).ready(function(){
	determineImageSet();
}
);
	//this checks if it's the high or normal resolution imagesfunction determineImageSet(){
	resolution2x = window.devicePixelRatio == 2;
	//check if resolution2xif(resolution2x){
	//switch the regular for 2x res graphicsglassTopImg = glassTopImg2x;
	glassBodyImg = glassBodyImg2x;
	redVerticalImg = redVerticalImg2x;
	glassBottomImg = glassBottomImg2x;
	tootipPointImg = tootipPointImg2x;
	tooltipButtImg = tooltipButtImg2x;
}
createGraphics();
}
//visually create the thermometerfunction createGraphics(){
	//add the html$("#goal-thermometer").html("<div id='therm-numbers'>" +"</div>" +"<div id='therm-graphics'>" +"<img id='therm-top' src='"+glassTopImg+"'></img>" +"<img id='therm-body-bg' src='"+glassBodyImg+"' ></img>" +"<img id='therm-body-mercury' src='"+redVerticalImg+"'></img>" +"<div id='therm-body-fore'></div>" +"<img id='therm-bottom' src='"+glassBottomImg+"'></img>" +"<div id='therm-tooltip'>" +"<img class='tip-left' src='"+tootipPointImg+"'></img>" +"<div class='tip-middle'><p>$0</p></div>" +"<img class='tip-right' src='"+tooltipButtImg+"'></img>" +"</div>" +"</div>");
	//preload and add the background images$('<img/>').attr('src',tooltipFGImg).load(function(){
	$(this).remove();
	$("#therm-body-fore").css("background-image","url('"+tooltipFGImg+"')");
	checkIfAllImagesLoaded();
}
);
	$('<img/>').attr('src',tooltipMiddleImg).load(function(){
	$(this).remove();
	$("#therm-tooltip .tip-middle").css("background-image","url('" + tooltipMiddleImg + "')");
	checkIfAllImagesLoaded();
}
);
	//adjust the cssheightOfBody = tickMarkSegementCount * tickHeight;
	$("#therm-graphics").css("left",widthOfNumbers)$("#therm-body-bg").css("height",heightOfBody);
	$("#goal-thermometer").css("height",heightOfBody + thermTopHeight + thermBottomHeight);
	$("#therm-body-fore").css("height",heightOfBody);
	$("#therm-bottom").css("top",heightOfBody + thermTopHeight);
	mercuryId = $("#therm-body-mercury");
	mercuryId.css("top",heightOfBody + thermTopHeight);
	tooltipId = $("#therm-tooltip");
	tooltipId.css("top",heightOfBody + thermTopHeight - tooltipOffset);
	//add the numbers to the leftvar numbersDiv = $("#therm-numbers");
	var countPerTick = goalAmount/tickMarkSegementCount;
	var commaSepCountPerTick = commaSeparateNumber(countPerTick);
	//add the numberfor ( var i = 0;
	i < tickMarkSegementCount;
	i++ ){
	var yPos = tickHeight * i + numberStartY;
	var style = $("<style>.pos" + i + "{
	top:" + yPos + "px;
	width:"+widthOfNumbers+"px}
</style>");
	$("html > head").append(style);
	var dollarText = commaSeparateNumber(goalAmount - countPerTick * i);
	$( numbersDiv ).append( "<div class='therm-number pos" + i + "'>" +dollarText+ "</div>" );
}
//check that the images are loaded before anythingarrayOfImages = new Array( "#therm-top","#therm-body-bg","#therm-body-mercury","#therm-bottom",".tip-left",".tip-right");
	preload(arrayOfImages);
}
;
	//check if each image is preloadedfunction preload(arrayOfImages){
	for(i=0;
	i<arrayOfImages.length;
	i++){
	$(arrayOfImages[i]).load(function(){
	checkIfAllImagesLoaded();
}
);
}
}
//check that all the images are preloadedfunction checkIfAllImagesLoaded(){
	imgsLoaded++;
	if(imgsLoaded == arrayOfImages.length+2){
	$("#goal-thermometer").fadeTo(1000,1,function(){
	animateThermometer();
}
);
}
}
//animate the thermometerfunction animateThermometer(){
	var percentageComplete = currentAmount/goalAmount;
	var mercuryHeight = Math.round(heightOfBody * percentageComplete);
	var newMercuryTop = heightOfBody + thermTopHeight - mercuryHeight;
	mercuryId.animate({
	height:mercuryHeight +1,top:newMercuryTop}
,animationTime);
	tooltipId.animate({
	top:newMercuryTop - tooltipOffset}
,{
	duration:animationTime}
);
	var tooltipTxt = $("#therm-tooltip .tip-middle p");
	//change the tooltip number as it moves$({
	tipAmount:0}
).animate({
	tipAmount:currentAmount}
,{
	duration:animationTime,step:function(){
	tooltipTxt.html(commaSeparateNumber(this.tipAmount));
}
}
);
}
//format the numbers with $ and commasfunction commaSeparateNumber(val){
	val = Math.round(val);
	while (/(\d+)(\d{
	3}
)/.test(val.toString())){
	val = val.toString().replace(/(\d+)(\d{
	3}
)/,'$1'+','+'$2');
}
return numberPrefix + val + numberSuffix;
}

CSS代码(styles.css):

body{margin:0px;background-color:#36393b;background:-webkit-gradient(radial,left top,left bottom,from(#669),to(#262a2d));/* Saf4+,Chrome */
 background:-webkit-radial-gradient(center,circle,#669,#262a2d);/* Chrome 10+,Saf5.1+ */
 background:-moz-radial-gradient(center,circle,#669,#262a2d);/* FF3.6+ */
 background:-ms-radial-gradient(center,circle,#669,#262a2d);/* IE10 */
 background:-o-radial-gradient(center,circle,#333333,#323232);/* Opera 11.10+ */
 background:radial-gradient(center,circle,#669,#262a2d);/* W3C */
 background:-webkit-radial-gradient(50% 50%,circle,#669,#262a2d);/* Chrome 10+,Saf5.1+ */
}
body,html{height:100%;}
#centered{width:175px;margin-left:auto;margin-right:auto;margin-top:150px;height:100%;}

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