纯js超酷3D旋转木马特效插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 纯js超酷3D旋转木马特效插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
纯js超酷3D旋转木马特效插件
分享:

    插件介绍

    ImageRotator.js是一款效果非常炫酷的纯js 3D旋转木马特效插件。该旋转木马插件可以制作出类似Flash的旋转图效果,并且每张图片都带有倒影效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-25
    阅读:
简要教程

ImageRotator.js是一款效果非常炫酷的纯js 3D旋转木马特效插件。该旋转木马插件可以制作出类似Flash的旋转图效果,并且每张图片都带有倒影效果。

使用方法

在页面中引入ImageRotator.js文件。

<script type="text/javascript" src="js/ImageRotator.js"></script>
                
HTML结构

使用一个<div>元素作为旋转木马的容器。容器中的每一张图片都要设置一个宽度和高度。

<div id="Ellipse" style="...">
  <img class="RotaitingIcon" src="img/One.gif" width="50" height="50">
  ......
<div>
                
初始化插件

你可以在<body>元素中使用onload方法来加载该旋转木马插件。例如:

<body onload="ImageRotatorJS('Ellipse','RotatingIcon',5,110,3000, 0, 90, 40, 'white');">
                

其中,ImageRotatorJS()构造函数中的参数如下:

  • 第一个参数表示父容器的ID。
  • 第二个参数表示每一个旋转木马项的class名称。
  • 第三个参数表示旋转速度:10 = fast, 500 = slow. 10 = 0.01 second 。
  • 第四个参数表示缩放的百分比: 0 = no Zoom, 100 = 100% Zoom。
  • 第五个参数表示旋转的时间间隔,单位为毫秒。
  • 第六个参数表示图片于屏幕在Z轴方向上的角度。
  • 第七个参数表示图片的初始角度。
  • 第八个参数表示图片的反射倒影的级数:0-100。
  • 第九个参数是可选参数,表示圆周的颜色。

方法

有两个方法可以控制旋转密木马的旋转。

  • IRJS_StopRotation:停止旋转。例如:
    <input type="button" name="" value="Stop" onmouseover="IRJS_StopRotation('Ellipse1');">
    
  • IRJS_StartRotation:开始旋转。例如:
    <input type="button" name="" value="Next" onclick="IRJS_StartRotation('Ellipse1',1);">
    <input type="button" name="" value="Back" onclick="IRJS_StartRotation('Ellipse1',-1);">
    

    其中:1表示时针旋转,-1表示逆时针旋转。还有第三个可选的参数用于修改旋转的时间间隔。

该旋转木马插件的github地址为:https://github.com/mjza/ImageRotatorJS

网友评论