如何使用Jquery将鼠标悬停在图像上

时间:2016-09-15 03:49:15

标签: javascript jquery html css

我一直试图编写一个能够鼠标悬停在图像上的代码,它可以上下移动图像。所有这些都没有奏效。 任何帮助或建议将不胜感激。

这是我的代码:



   jQuery.easing['jswing'] = jQuery.easing['swing'];
   jQuery.extend(jQuery.easing, {
     easeOutBounce: function(x, t, b, c, d) {
       if ((t /= d) < (1 / 2.75)) {
         return c * (7.5625 * t * t) + b
       } else if (t < (2 / 2.75)) {
         return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
       } else if (t < (2.5 / 2.75)) {
         return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
       } else {
         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
       }
     }
   });

   $('.game_wvm').hover(function() {
     $(this).stop().animate({
       top: -50
     }, 900, "easeOutBounce");
   }, function() {
     $(this).stop().animate({
       top: 0
     }, 900, "easeOutBounce");
   });
&#13;
.game_wvm {
  position: relative;
  /* To animate the `top` position */
  display: block;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  background-color: black;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <em class="game_wvm"></em> //getting imageURL
  <div class="game-name">金刚狼</div>
  <div class="game-rollover clearfix"><a href="javascript:void(0);" class="real-play">立刻开始</a>
  </div>
  <p class="game-progressive">¥<span></span>
  </p>
</li>
&#13;
&#13;
&#13;

0 个答案:

没有答案