基于Jquery的温度计动画效果_jquery_脚本之家

2019-11-27 06:03栏目:网站首页
TAG:

设计图如下: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 复制代码 代码如下: $.ready.fadeTo;//初始透明度为0; $.click{this.select.click{ inputvalue=$获取input元素的值,另外还可以用attr来获取; var inputnum=parseInt; if.search{ alert; return false; }else{ $.html; if{ inputnum=100; $ $.html; }else if{ inputnum=0; $ $.html; } } var Columnhe=inputnum/100; $.animate({height:inputnum},'show'); $.fadeTo; //在这里把html换成text效果也是一样的; }); }); 将代码一一拷贝到页面相应的位置,然后记得调用jquery框架,展示条件有限,所以效果跟设计图有出入,但实现原理是一样的,欢迎大家多多交流!

版权声明:本文由本港台现场报码发布于网站首页,转载请注明出处:基于Jquery的温度计动画效果_jquery_脚本之家