Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > js erkennt den Effekt der quadratischen Farbe, die von unten nach oben steigt_Javascript-Fähigkeiten

js erkennt den Effekt der quadratischen Farbe, die von unten nach oben steigt_Javascript-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben： 2016-05-16 16:40:17
Original
1520 Leute haben es durchsucht
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
  interid=setInterval(Showgao,1);
  var i=1;
  $('#top').height(8);
  $('#buttom').css('marginTop',42);
  $('#buttom').css('background','#d6d6d6');
  function Showgao()
  {
    var oldH=$('#buttom').css('marginTop');
    var h= oldH.substr(0,oldH.indexOf('px'));
    $('#buttom').css('marginTop',h-1);
    $('#buttom').height(i);
    i++;
    if(i==42){clearInterval(interid);}
  }
  
  interid1=setInterval(Showgao1,1);
  var i1=1;
  $('#top1').height(4);
  $('#buttom1').css('marginTop',46);
  $('#buttom1').css('background','red');
  function Showgao1()
  {
    var oldH=$('#buttom1').css('marginTop');
    var h= oldH.substr(0,oldH.indexOf('px'));
    $('#buttom1').css('marginTop',h-1);
    $('#buttom1').height(i1);
    i1++;
    if(i1==30){clearInterval(interid1);}
  }
});
</script>
<body>
<style>
  .container{width:20px;height:50px;border:1px solid #999;font-size:10px;float:left;margin-left:5px;}
</style>
<div class="container" onclick="javascript:alert(1);" >
   <div id="top">82%</div>
   <div id="buttom"></div>
</div>
<div class="container" onclick="javascript:alert(1);" >
   <div id="top1" >62%</div>
   <div id="buttom1"></div>
</div>
</body>
</html>
Nach dem Login kopieren
Verwandte Etiketten：
正方形 颜色
Vorheriger Artikel：jQuery löscht oder löscht ein HTML-Element example_jquery Nächster Artikel：Die jQuery-Methode html() kann nicht verwendet werden und der Inhalt kann nicht angezeigt werden_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
javascript - Wie erhalte ich den Inhalt in Klammern mithilfe regulärer Ausdrücke in JS?
Aus 1970-01-01 08:00:00
0
0
0
show() ist nach Ajax-Erfolg ungültig
Aus 1970-01-01 08:00:00
0
0
0
javascript – Eine Zeile Code für den Quellcode von underscore.js schreiben
Aus 1970-01-01 08:00:00
0
0
0
javascript - Wie ändere ich den Übergangseffekt von vue1.0 in vue2.0?
Aus 1970-01-01 08:00:00
0
0
0
javascript - Woher wissen Sie, dass der Haken des Versprechens nicht geschrieben ist?
Aus 1970-01-01 08:00:00
0
0
0
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage