今天介绍一款基于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

评论() 相关

收藏

赞

hjl416148489

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。