집 > 기사 > php教程 > jquery는 마우스가 그림 목록으로 이동할 때 미세한 움직임을 인식합니다.

jquery는 마우스가 그림 목록으로 이동할 때 미세한 움직임을 인식합니다.

高洛峰원래의: 2016-12-02 17:19:351175검색

이 효과는 jQuery와 CSS를 사용하여 그림 목록을 구현합니다. 마우스를 안으로 이동하면 그림이 약간 왼쪽으로 이동하고 밖으로 이동하면 복원됩니다.

jQuery 이벤트는 mouseenter와 mouseleave를 사용하고, 이벤트 바인딩 방식은 새로 추천하는 on 방식을 사용합니다.

코드는 다음과 같습니다.

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

성명：

이전 기사：일반적인 http 응답 상태 코드다음 기사：일반적인 http 응답 상태 코드

jquery는 마우스가 그림 목록으로 이동할 때 미세한 움직임을 인식합니다.

관련 기사