Jquery_jquery를 기반으로 한 온도계 애니메이션 효과-JS 튜토리얼-php.cn

Jquery_jquery를 기반으로 한 온도계 애니메이션 효과

WBOY

풀어 주다： 2016-05-16 18:24:55

원래의

1412명이 탐색했습니다.

디자인 도면은 다음과 같습니다.
Jquery_jquery를 기반으로 한 온도계 애니메이션 효과
1.xhml

코드 복사 코드는 다음과 같습니다.

name="" type=" 버튼" id="위험" value="정도 보기" />

2.css

코드 복사 코드는 다음과 같습니다. #num{color:#999;}

#mometer{ 위치:상대; 높이:100px;너비: 15px;배경 색상:#CCC;여백:50px;}

범위{위치:절대;디스플레이:블록;하단:0px;너비:40px;} 
# Hgheader{높이:15px;줄 높이: 15px;색상:#FF0000;글꼴 크기:14px;글꼴-가족:Arial, Helvetica, sans-serif; 
국경 바닥:#f00 1px 단색;왼쪽:- 40px;위치:상대적;} 
 #Hg{높이:0px; 글꼴 크기:0px;배경-색상:#C00;너비:15px;} 
#hot{높이:100px;너비:15px; -색상:#FF0; 위치:절대:0; 왼쪽:0;} 

 

3.js

코드 복사

코드는 다음과 같습니다. $(document).ready(function(){ $("#hot ").fadeTo(0,0);//초기 투명도는 0입니다.

$('#num').click(function(){this.select();})

$('#Risk ').click(function(){ 
inputvalue =$('#num').val();//val()은 입력 요소의 값을 가져오고 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을 텍스트로 바꾸는 효과는 동일합니다. 
}); 
페이지의 해당 위치에 코드를 하나씩 복사한 후 호출하는 것을 잊지 마세요. jquery 프레임워크는 표시 조건이 제한되어 있으므로 디자인 도면과 효과는 다르지만 구현 원리는 동일합니다. 모두 환영합니다. 소통하다!