Home >php教程 >PHP开发 >jquery implements micro movement when mouse moves into picture list

jquery implements micro movement when mouse moves into picture list

高洛峰Original: 2016-12-02 17:19:351241browse

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Common http response status codesNext article：Common http response status codes

See more

jquery implements micro movement when mouse moves into picture list

Related articles