这是一款效果非常酷的jQuery和CSS3圆形图片切换特效。该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画。可以任意设置多张图片进行来回翻转、旋转切换,效果堪称一流。
使用方法
首先要引入jQuery和thereSomeThingAboutMe.js文件,以及插件依赖的animate.css文件。
<link href="css/animate.css" rel='stylesheet' type='text/css'/> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/thereSomeThingAboutMe.js"></script>
HTML结构
该圆形图片切换特效的HTML结构是使用一个<div>
来包裹一个<img>
元素。图片的src
首先指向第一张要显示的图片。图片默认的ID选择符是myPic
,如果更改的话后面要在参数中重新配置。同时图片要添加class animated
来应用animate.css的动画。
<div class="about-of-me"> <img src="images/01.jpg" id="myPic" height="250" class="animated "/> </div>
初始化插件
在页面加载完毕之后,可以使用下面的方法来初始化该圆形图片切换特效插件。
thereSomeThingAboutMe.run();
也可以在初始化时自定义一些配置参数:
thereSomeThingAboutMe.run({ random:false, time: 6500, pictures: ['1.png', '2.png', '3.png','vs.vs..'], inAnimation: 'zoomIn', outAnimation: 'bounceOut', });
配置参数
参数 | 默认值 | 描述 |
object | '#myPic' | 图片元素的ID选择符 |
pictures | ['1.png', '2.png', '3.png'] | 图片数组,可以任意修改图片数量和名称 |
random | true | 是否随机显示图片 |
startNumber | 0 | 开始图片的下标 |
time | 5000(毫秒) | 两张图片切换中间的延迟时间 |
inAnimation | 'flipInX' | 进入动画,可以是任何可用的animate.css动画名称 |
outAnimation | 'flipOutY' | 离开动画,可以是任何可用的animate.css动画名称 |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!