
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。
1、
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>
2、
接着引入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();
});查看该特效演示及免费下载,请访问【素材火】:http://www.sucaihuo.com/js/78.html 