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