注册时间2014-10-9
在线时间 小时
- 最后登录
- 1970-1-1
|
<head>
<title>用纯js 3D旋转木马特效插件旋转图片</title>
<style>
body {font-family: Tahoma, Geneva, sans-serif; font-size: 1.2em; color: #FFffff; }
input {border: none; }
.mod-a{width: 1000px; clear: both; margin: 0 auto;border:0px #ffffff ridge; border-radius:32px;height: 600px;background: url(fdxPPA.jpg) 100% fixed; }
#Ellipse {position:relative;visibility:visible;z-index:1;width:820px;height:80px;border:none;margin-top:280px;margin-bottom:100px;float: left;margin-left:80px;}
.RotatingIcon {border: none;width: 100px;}
.left {background-color : #ccf8f3;width: 30px;height: 44px; border:2px #FF4A20 solid;display: block;float: left;margin-right: 50px;margin-top:0px;z-index: 99;}
.right {background-color : #ccf8f3;width: 30px; height: 44px; border:2px #FF4A20 solid;display: block;float: left; margin-left: 70px; margin-top: 0px; z-index: 99;}
</style>
<script src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/ImageRotator-min.js"></script>
<script type="text/javascript">
var imageRotater = null;
function InitScripts() {
imageRotater = ImageRotatorJS('Ellipse', 'RotatingIcon', 5, 100, 2000, 0, 90, 0, null);
// 其中，ImageRotatorJS()构造函数中的参数如下：
// 第一个参数Ellipse表示父容器的 ID
// 第二个参数RotatingIcon表示每一个旋转木马项的 class 名称
// 第三个参数5表示旋转速度：10 = fast, 500 = slow. 10 = 0.01 second
// 第四个参数100表示缩放的百分比： 0 = no Zoom, 100 = 100% Zoom
// 第五个参数2000表示旋转的时间间隔，单位为毫秒
// 第六个参数0表示图片于屏幕在 Z 轴方向上的角度
// 第七个参数90表示图片的初始角度
// 第八个参数20表示图片的反射倒影的级数：0-100
// 第九个参数null是?,反正不动它。
}
</script>
</head>
<!-- 在 <body> 元素中使用 onload 方法来加载该旋转木马插件 -->
<body onload="InitScripts()">
<div class="mod-a">
<div style="position:relative; margin-top:0px; margin-left:0px;left:350px ;"><h1>3D旋转图片</h1> </div>
<input class="left" type="button" name="" value="顺" onclick="IRJS_StartRotation('Ellipse',1);"> <!-- 1 表示顺时针旋转 -->
<div id="Ellipse">
<img class="RotatingIcon" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/1.gif">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/2.gif ">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/3.gif ">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/4.gif">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/5.gif ">
<img class="RotatingIcon" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/6.gif ">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/7.gif ">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/8.gif">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/9.gif">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/10.gif">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/11.gif">
<img class="RotatingIcon" src=" https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/12.gif">
</div>
<input class="right" type="button" name="" value="逆" onclick="IRJS_StartRotation('Ellipse',-1);"> <!-- -1 表示逆时针旋转 -->
</div>
<audio autoplay="autoplay" loop="loop" src="//music.163.com/song/media/outer/url?id=1805328866.mp" type="audio/mpeg"></audio>
<embed style="LEFT: 0px; POSITION: absolute; TOP: 0px" align="right" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/htm/2021/cmp511/511.swf" width="1000" height="600" type="application/x-shockwave-flash" quality="high" wmode="transparent">
<center></cente>
</body> |
|
发表于 2021-8-14 15:55
楼主