首先我们在#container放置13张图片，并且附带小清新按钮。
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<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>调用zalki_hover_img插件代码非常简洁：
$(window).load(function() {
$('.main_box').ZalkiHoverImg();
});最后我们看下图片悬浮展示效果吧，<a href='https://jy.tp.yuanmeng.life/jquery/demo/78/' target='_blank'>点击查看</a>。
*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
