jQuery悬浮图片上13种超炫效果

今天介绍一款基于jQuery+easing动画效果来展示悬浮对象的插件，来美化页面并且提升用户体验效果。

淘建站为您提供更多_图片代码_图片滑动_悬浮_按钮，在此特别感谢您对我们的支持与厚爱！

HTML

首先我们在#container放置13张图片，并且附带小清新按钮。

<div id="container">
    <div class="main_box user_style3" data-hipop="one-horizontal">
        <img src="images/3.jpg">
        <a href="#" class="popup">
            BUY
        </a>
    </div>
    <div class="main_box user_style1" data-hipop="one">
        <img src="images/1.jpg">
        <a href="#" class="popup">
        </a>
    </div>
    <div class="main_box user_style2" data-hipop="two">
        <img src="images/2.jpg">
        <a href="#" class="popup">
        </a>
        <a href="#" class="popup2">
        </a>
    </div>
......
</div>

接着引入jQuery库和zalki_hover_img插件。

<script type="text/javascript" src="jquery.js"></script> 
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.zalki_hover_img.min-0.2.js" type="text/javascript"></script>

jQuery

调用zalki_hover_img插件代码非常简洁：

$(window).load(function() {
    $('.main_box').ZalkiHoverImg();
});

最后我们看下图片悬浮展示效果吧，点击查看。