首页 / JQUERY / 基于Jquery的温度计动画效果_jquery

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于Jquery的温度计动画效果_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1405字，纯文字阅读大概需要3分钟。

内容图文

设计图如下:
基于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(inputnum<=0){
inputnum=0;
$('#num').val(0)
$("#Hgheader").html(0+"℃");
}
}
var Columnhe=inputnum/100;
$("#Hg").animate({height:inputnum},'show');
$("#hot").fadeTo('slow',Columnhe);
//在这里把html换成text效果也是一样的;
});
});

将代码一一拷贝到页面相应的位置，然后记得调用jquery框架，展示条件有限，所以效果跟设计图有出入，但实现原理是一样的，欢迎大家多多交流！

内容总结

以上是互联网集市为您收集整理的基于Jquery的温度计动画效果_jquery全部内容，希望文章能够帮你解决基于Jquery的温度计动画效果_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/311025.html

来源：【匿名】