jquery realizes micro movement when mouse moves into picture list-JS Tutorial-php.cn

jquery realizes micro movement when mouse moves into picture list

高洛峰

Release： 2016-12-03 09:02:56

Original

1220 people have browsed it

This effect uses jQuery and CSS to implement a picture list. When the mouse is moved in, the picture moves slightly to the left, and when the mouse is moved out, it restores.

The jQuery events use mouseenter and mouseleave, and the event binding method uses the newly recommended on method.

The code is as follows:

<!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>

Copy after login