基于Jquery的温度计动画效果
更新时间：2010年06月18日 23:57:10 作者：
将代码一一拷贝到页面相应的位置，然后记得调用jquery框架，展示条件有限，所以效果跟设计图有出入，但实现原理是一样的，欢迎大家多多交流！
设计图如下:
1.xhml
<div id="mometer">
<div id="hot"></div>
<span>
<div id="Hgheader">0℃</div>
<div id="Hg"></div>
</span>
</div>
<input name="aa" type="text" value="请输入0-100的数值" id="num"/>
<input name="" type="button" id="Risk" value="查看度数" />
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框架，展示条件有限，所以效果跟设计图有出入，但实现原理是一样的，欢迎大家多多交流！
1.xhml
复制代码 代码如下:
<div id="mometer">
<div id="hot"></div>
<span>
<div id="Hgheader">0℃</div>
<div id="Hg"></div>
</span>
</div>
<input name="aa" type="text" value="请输入0-100的数值" id="num"/>
<input name="" type="button" id="Risk" value="查看度数" />
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实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下2016-01-01
网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，因为这个表单验证插件是从我以前的个人JS框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮。2009-12-12
jQuery动态设置form表单的enctype值(实现代码)
本篇文章是对在jQuery中动态设置form表单的enctype值的实现代码进行了详细的分析介绍，需要的朋友参考下2013-07-07
本篇文章是对Jquery中LigerUi的弹出编辑框的实现方法进行了分析介绍，需要的朋友可以参考下2013-07-07
本文给大家分享的是使用jQuery实现仿百度经验华东切换浏览效果，非常的炫酷，推荐给大家。有需要的小伙伴可以参考下2015-04-04
这段代码是我在做13年一份兼职的时候无聊加上去的，为jQuery添加触摸事件的支持。因为做得有点无聊，所以就帮客户添加了用响应式网页+JS touch兼容了移动设备，主要是Webkit的移动设备2014-02-02
Javascript技巧之不要用for in语句对数组进行遍历
Javascript技巧-不要用for in语句对数组进行遍历的一些原因分析，需要的朋友可以参考下。2010-10-10
本篇文章主要介绍了jquery——九宫格大转盘抽奖实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
很多网站上面有顶一下，踩一下效果是直接用别人做好的插件放上去的，上星期正好要用到这个效果，就去研究了下。下面就一步一步来实现整个效果。。。。2010-07-07
这篇文章主要介绍了jQuery动态创建html元素的常用方法,包括jQuery追加元素、遍历数组以及使用模板等方法,非常具有实用价值,需要的朋友可以参考下2014-09-09
最新评论