jQuery支持多种动画切换图片特效

时间：2015-08-23 来源：互联网

特效说明：

一款jQuery支持多种动画切换图片特效，该jQuery插件带有弹性左右滑动效果、图片旋转放大效果、透明渐变切换效果、视觉放大缩小效果等。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：IE10、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器）

使用方法：

1、调用CSS样式：
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://fonts.useso.com/css?family=Oswald">
<link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans">
<link rel="stylesheet" href="css/jcslider.css">
<link rel="stylesheet" href="css/animate.min.css">

2、调用JS插件代码：
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jcslider.js"></script>

3、添加HTML代码：
将......之间的html和js代码；放在<body></body>之间。

4、JS实例化代码：
<script>
   $(document).ready(function() {
       $('.jc-slider').jcSlider({
           animationIn: 'bounceInRight',
           animationOut: 'bounceOutLeft',
           stopOnHover: false
       });

       $('.jc-slider2').jcSlider({
           animationIn: 'zoomInUp',
           animationOut: 'flipOutX',
           stopOnHover: false
       });
       $('.jc-slider3').jcSlider({
           animationIn: 'flipInX',
           animationOut: 'shake',
           stopOnHover: false
       });
       $('.jc-slider4').jcSlider({
           animationIn: 'zoomIn',
           animationOut: 'zoomOut',
           stopOnHover: false
       });
   });
</script>

标签图片特效 jquery插件 CSS3特效旋转特效放大缩小

预览下载收藏分享