注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

全屏动感的背景平铺幻灯片插件FourBoxes

媒体 fishcity 1823浏览

幻灯片插件FourBoxes

这款全屏动感的背景平铺幻灯片插件fourboxes是一款独立的js库,它不依赖于jquery库,它可让您的网页更加的轻便,但实现的效果却是让你意外的。fourboxes提供了三种切换方式,一种是3D旋转切换,一种是向下切换,一种是左右切换,所有切换的动画效果都非常的平滑动感,同进背景是全屏的,给人相当的大气时尚的感觉。什么,这不是你想要的效果,那试试这款吧jQuery制作带动画效果的锚点跳转特效

注:fourboxes用了许多CSS3的属性,所以它必须在非常现代浏览器中才能正常运行,什么叫非常现代浏览器,IE10+,firefox,chrome等就是。

使用方法:

在head区引用所需要的样式

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

接着引入JS核心文件

<script src="js/classie.js"></script>
<script src="js/boxesFx.js"></script>
<script src="js/modernizr.custom.js"></script>

构建html

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

写入JS,初始化插件

<script>
new BoxesFx( document.getElementById( 'boxgallery' ) );
</script>

注,请使用html5格式来书写更好,更好的支持CSS3。

转载请注明:jQ酷 » 全屏动感的背景平铺幻灯片插件FourBoxes

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。