jQuery plugin animsition使用小结
更新时间:2017年09月14日 09:59:18 作者:cyany_blue
本文通过实例代码给大家分享了jQuery plugin animsition用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
用法整理
下载地址:https://github.com/blivesta/animsition
文档地址:http://git.blivesta.com/animsition/
实现的效果是,各种不同效果的转场效果
<div class="animsition"> <div class="item bg-indigo"> <h1>Animsition: Sandbox</h1> </div> <h2>Defaults</h2> <ol> <li><a class="animsition-link" data-animsition-out-class="rotate-out" data-animsition-out-duration="500" href="page1.html" rel="external nofollow" >Basic</a></li> <li><a class="animsition-link" data-animsition-out-class="rotate-out" data-animsition-out-duration="500" href="page2.html" rel="external nofollow" >Options</a></li> </ol> </div> <script src="jquery-3.2.1.min.js"></script> <script src="js/animsition.js"></script> <script> $(document).ready(function() { $(".animsition").animsition({ inClass: 'flip-in-y', outClass: 'flip-out-y', inDuration: 1500, // outDuration: 800, linkElement: '.animsition-link', // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])' loading: false, loadingParentElement: 'body', //animsition wrapper element loadingClass: 'animsition-loading', loadingInner: '', // e.g '<img src="loading.svg" />' timeout: false, timeoutCountdown: 5000, onLoadEvent: true, browser: [ 'animation-duration', '-webkit-animation-duration'], // "browser" 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', // transition: function(url){ window.location.href = url;} }); }); </script>
注意!!!css文件的.animistion类的opacity设置了为0;需要改过来,要不然页面元素看不到!!!
总结
以上所述是小编给大家介绍的jQuery plugin animsition使用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
实现easyui的datagrid导出为excel的示例代码
下面小编就为大家带来一篇实现easyui的datagrid导出为excel的示例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11jQuery动态添加 input type=file的实现代码
有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能2012-06-06
最新评论