悬浮在图片上的13种超炫效果!代码很简洁。

浏览:3909 发布日期:2015/04/27 分类:用法示例 关键字: 悬浮在图片上 图片上悬浮
今天介绍一款基于jQuery+easing动画效果来展示悬浮对象的插件,来美化页面并且提升用户体验效果。


页面底部有演示、免费下载链接。若是想看更多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
评论( 相关
后面还有条评论,点击查看>>