首頁 > web前端 > js教程 > 主體

基于Jquery的温度计动画效果_jquery

WBOY
發布: 2016-05-16 18:24:55
原創
1412 人瀏覽過

设计图如下:
基于Jquery的温度计动画效果_jquery
1.xhml

复制代码 代码如下:




0℃








2.css
复制代码 代码如下:

#num{color:#999;}
#mometer{position:relative; height:100px;width:15px;background-color:#CCC;margin:50px;}
span{position:absolute;display:block;bottom:0px;width:40px;}
#Hgheader{height:15px;line-height:15px;color:#FF0000;font-size:14px;font-family:Arial, Helvetica, sans-serif;
border-bottom:#f00 1px solid;left:-40px;position:relative;}
#Hg{height:0px; font-size:0px;background-color:#C00;width:15px;}
#hot{height:100px;width:15px; background-color:#FF0; position:absolute; top:0; left:0;}

3.js

复制代码 代码如下:

$(document).ready(function(){
$("#hot").fadeTo(0,0);//初始透明度为0;
$('#num').click(function(){this.select();})
$('#Risk').click(function(){
inputvalue=$('#num').val();//val()获取input元素的值,另外还可以用attr("value")来获取;
var inputnum=parseInt(inputvalue);
if($('#num').val().search("^-?\\d+$") != 0){
alert("请输入一个0-100的整数!");
return false;
}else{
$("#Hgheader").html(inputvalue+"℃");
if(inputnum>=100){
inputnum=100;
$('#num').val(100)
$("#Hgheader").html(100+"℃");
}else if(inputnuminputnum=0;
$('#num').val(0)
$("#Hgheader").html(0+"℃");
}
}
var Columnhe=inputnum/100;
$("#Hg").animate({height:inputnum},'show');
$("#hot").fadeTo('slow',Columnhe);
//在这里把html换成text效果也是一样的;
});
});

将代码一一拷贝到页面相应的位置,然后记得调用jquery框架,展示条件有限,所以效果跟设计图有出入,但实现原理是一样的,欢迎大家多多交流!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!