suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery erkennt Mikrobewegungen, wenn sich die Maus in die Bildliste bewegt

jquery erkennt Mikrobewegungen, wenn sich die Maus in die Bildliste bewegt

高洛峰
高洛峰Original
2016-12-03 09:02:561214Durchsuche

Dieser Effekt verwendet jQuery und CSS, um eine Bildliste zu implementieren. Wenn die Maus nach innen bewegt wird, bewegt sich das Bild leicht nach links, und wenn die Maus nach außen bewegt wird, wird es wiederhergestellt.

Die jQuery-Ereignisse verwenden Mouseenter und Mouseleave, und die Ereignisbindungsmethode verwendet die neu empfohlene On-Methode.

Der Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>jQuery实现图片列表鼠标移入微动_何问起</title><base target="_blank" />
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style type="text/css">
  body, div, li, p, img, a {
   margin: 0;
   padding: 0;
  }
  .hovertreecontainer {
   width: 370px;
   margin: 50px auto;
  }
   .hovertreecontainer a {
    text-decoration: none;
   }
  .hovertree-item-box {
   height: 120px;
   width: 185px;
   position: relative;
   padding: 10px;
   box-sizing: border-box;
   float: left;
  }
   .hovertree-item-box .title {
    width: 80px;
    height: 100%;
    color: #4998a1;
    font-size: 14px;
   }
   .hovertree-item-box.odd {
    border-bottom: 1px solid #CCC;
    border-right: 1px solid #CCC;
   }
   .hovertree-item-box.even {
    border-bottom: 1px solid #CCC;
   }
 
   .hovertree-item-box.nobottom {
    border-bottom: none;
   }
   .hovertree-item-box .hovertree-img-box {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    bottom: 5px;
   }
  .hovertree-img-box img {
   width: 100%;
   height: 100%;
  }
  .hovertreecontainer:after {
   content: "";
   display: block;
   clear: both;
  }
 </style>
</head>
<body>
 <div class="hovertreecontainer"><h2>jQuery实现图片列表鼠标移入微动</h2>
  <a href="http://hovertree.com/texiao/css/20/">
   <div class="hovertree-item-box odd">
    <div class="title">春节对联</div>
    <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/o9qashmi.gif"></div>
   </div>
  </a>
  <a href="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm">
   <div class="hovertree-item-box even">
    <div class="title">下雨天</div>
    <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/f748s0ko.jpg"></div>
   </div>
  </a>
  <a href="http://hovertree.com/h/bjae/0st5ww13.htm">
   <div class="hovertree-item-box odd">
    <div class="title">磨砂玻璃</div>
    <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/agagq0or.jpg"></div>
   </div>
  </a>
  <a href="http://hovertree.com/menu/texiao/">
   <div class="hovertree-item-box even">
    <div class="title">网页特效</div>
    <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/r51a22uy.gif"></div>
   </div>
  </a>
  <a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm">
   <div class="hovertree-item-box odd nobottom">
    <div class="title">何问起统计文件数</div>
    <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/bjafjd/iofopnro.png"></div>
   </div>
  </a>
  <a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">
   <div class="hovertree-item-box even nobottom">
    <div class="title">HovertreeImg</div>
    <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201601/p3t2ldyr.png"></div>
   </div>
  </a>
 <div><a href="http://hovertree.com/h/bjaf/4mv4wgmj.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/texiao/">特效</a></div>
 </div>
 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
  $(function () {
   $(&#39;.hovertreecontainer .hover&#39;+&#39;tree-item-box&#39;).on(&#39;mouseenter&#39;, function (ev) {
    var oImgBox = $(this).find(&#39;.hovertree-img-box&#39;);
 
    $(oImgBox).stop(true).animate({
     right: &#39;20px&#39;
    }, "normal");
   }).on(&#39;mouseleave&#39;, function (ev) {
    var oImgBox = $(this).find(&#39;.hovertree-img-box&#39;);
    $(oImgBox).stop(true).animate({
     right: &#39;10px&#39;
    }, "normal");
   });
  });
 </script>
</body>
</html>


Stellungnahme：
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
Vorheriger Artikel：js-String-Datum-DirektvergleichsgrößeNächster Artikel：js-String-Datum-Direktvergleichsgröße

In Verbindung stehende Artikel

Mehr sehen