Maison > Article > interface Web > jQuery réalise un cercle d'effet d'animation example_jquery

jQuery réalise un cercle d'effet d'animation example_jquery

WBOYoriginal: 2016-05-16 15:46:331566parcourir

L'exemple de cet article décrit comment jQuery implémente l'effet d'animation de cercle. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ce jQuery implémente l'effet d'animation de cercle. Les effets de cercle de Google sont très bons, je vais les imiter ici. Le temps est limité et il y a toujours un problème d'accumulation d'animation qui n'a pas été résolu. Bien entendu, il est basé sur jQuery, et le JS pur n'a pas encore cette capacité. Les amis intéressés peuvent essayer de l'améliorer.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!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> 
<title>jQuery 动画效果 circle</title> 
<style> 
  body {
    width:200px;
    margin:0 auto;
    margin-top:100px;
    background:#CCC;
  }
  #login{
    position:relative;
  }
  .circle_l, .circle_b {
    width:148px;
    height:148px;
    border-radius:80px;
    background:blue;
    border:1px solid #FFF;
  }
  .circle_l {
    width:138px;
    height:138px;
    position:absolute;
    top:5px;
    left:5px;
  }
  .circle_b {
    background:lightblue;
  }
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head> 
<body>
<div id="login">
  <div class="circle_b">
    <div class="circle_l"></div>
  </div>
</div>
<script type="text/javascript"> 
  $(".circle_b").hover(function(){
    $(this).stop().animate({width:188,height:188,marginTop:"-20",marginLeft:"-20"},500)
        .css({"border-radius":"150px"});
    $(".circle_l").stop().animate({marginTop:"20"},500)
  },function(){
    $(this).stop().animate({width:148,height:148,marginTop:"0",marginLeft:"0"},500)
        .css({"border-radius":"100px"});
    $(".circle_l").stop().animate({marginTop:"0"},500)
  })
</script>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery implémente l'effet de point chaud de la carte des informations d'invite contextuelle lorsque la souris passe dessus it_jqueryArticle suivant：jQuery implémente l'effet de point chaud de la carte des informations d'invite contextuelle lorsque la souris passe dessus it_jquery

Articles Liés

Voir plus