jquery implements micro movement when mouse moves into picture list-PHP开发-php.cn

jquery implements micro movement when mouse moves into picture list

高洛峰

Release： 2016-12-02 17:19:35

Original

1218 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, p, 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>
 <p class="hovertreecontainer"><h2>jQuery实现图片列表鼠标移入微动</h2>
  <a href="http://hovertree.com/texiao/css/20/">
   <p class="hovertree-item-box odd">
    <p class="title">春节对联</p>
    <p class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/o9qashmi.gif"></p>
   </p>
  </a>
  <a href="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm">
   <p class="hovertree-item-box even">
    <p class="title">下雨天</p>
    <p class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/f748s0ko.jpg"></p>
   </p>
  </a>
  <a href="http://hovertree.com/h/bjae/0st5ww13.htm">
   <p class="hovertree-item-box odd">
    <p class="title">磨砂玻璃</p>
    <p class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/agagq0or.jpg"></p>
   </p>
  </a>
  <a href="http://hovertree.com/menu/texiao/">
   <p class="hovertree-item-box even">
    <p class="title">网页特效</p>
    <p class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/r51a22uy.gif"></p>
   </p>
  </a>
  <a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm">
   <p class="hovertree-item-box odd nobottom">
    <p class="title">何问起统计文件数</p>
    <p class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/bjafjd/iofopnro.png"></p>
   </p>
  </a>
  <a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">
   <p class="hovertree-item-box even nobottom">
    <p class="title">HovertreeImg</p>
    <p class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201601/p3t2ldyr.png"></p>
   </p>
  </a>
 <p><a href="http://hovertree.com/h/bjaf/4mv4wgmj.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/texiao/">特效</a></p>
 </p>
 <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