web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网站模板
58种jQuery模拟CSS3过渡页面切换特效
分类:
日期:
2023-07-03
点击(1)
评论(0)
演 示
免费下载
简介
####浏览器兼容 Animsition需要支持CSS3的浏览器才能正常工作。 - IE10+ - Chrome - Safari - Firefox #### 使用方法 要使用该页面切换动画特效插件首先要引入相关的依赖文件。 ```html
``` ##### HTML结构 如果所有页面都使用相同的切换过渡效果,当前页面用于显示切换效果的内容使用一个class为animsition的div进行包裹,使用带class为animsition-link的超链接或按钮来跳转页面。class名称可以修改,修改后后面的js代码也要做相应的修改。 ```html
animsition link 1
animsition link 2
``` 如果你希望每一个跳转页面的切换效果都不相同,可以使用下面的方法: ```html
animsition link 1
animsition link 2
``` 如果你希望每一个页面都使用不同的动画效果,可以使用下面的方法: ```html
...
``` ##### JAVASCRIPT 在页面加载之后,可以使用下面的方法来调用该插件: ```html $(document).ready(function() { $(".animsition").animsition({ inClass : 'fade-in', outClass : 'fade-out', inDuration : 1500, outDuration : 800, linkElement : '.animsition-link', // e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])' loading : true, loadingParentElement : 'body', //animsition wrapper element loadingClass : 'animsition-loading', unSupportCss : [ 'animation-duration', '-webkit-animation-duration', '-o-animation-duration' ], //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser. //The default setting is to disable the "animsition" in a browser that does not support "animation-duration". overlay : false, overlayClass : 'animsition-overlay-slide', overlayParentElement : 'body' }); }); ``` 上面的参数十分简单,看名称就可以知道它的意思。其中,inClass是进入时的页面动画方式,outClass是切换到其它页面时的动画方式。上面的代码是淡入淡出的进入和淡入淡出的切换到其它页面。要使用不同的效果,就更换这两个class。关于这些class共有58个,后面会一一列出。overlay是是否打开遮罩模式,如果设置为true,将会以遮罩的方式完成页面切换过渡。 另外,该页面切换过渡效果还有一组遮罩(Overlay)模式的class: - overlay-slide-in-top - overlay-slide-out-top - overlay-slide-in-bottom - overlay-slide-out-bottom - overlay-slide-in-left - overlay-slide-out-left - overlay-slide-in-right - overlay-slide-out-right
相关推荐
设计团队博客css网站模板
无人机数码商店网站模板
移动版猎豹安全浏览器官网html5动画引导页
微信小程序的手势密码
白色简约布局html5模板
响应式商品展示和商品信息比较网格布局界面
广告
广告