大郎该吃药了【3D旋转图片】

画尘如潮 · 发表于 2021-8-14 15:55

画面唯美，歌曲好听，感谢精彩分享！

彩云归 · 发表于 2021-8-14 16:11

欣赏精彩音画，问好！

老胖阿哥 · 发表于 2021-8-14 17:55

欣赏老师佳作！

浪哥 · 发表于 2021-8-14 22:12

真真发表于 2021-8-14 12:00
美好制作，心情愉悦。

谢谢真真鼓励，一样祝心情愉悦

山里娃 · 发表于 2021-8-15 07:58

欣赏精美的音画制作。

沪上人 · 发表于 2021-8-15 20:53

欣赏！欣赏学习！

菡萏 · 发表于 2021-8-15 22:31

哈哈，看来我的作品不错，有那么多人照搬！

菡萏 · 发表于 2021-8-15 22:41

<!DOCTYPE html>
<html>
<head>
<title>用纯js 3D旋转木马特效插件旋转图片</title>
<style>
body {font-family: Tahoma, Geneva, sans-serif; font-size: 1em; color: #ad9952; }
input {border: none; }
.mod-a{width: 950px; clear: both; margin: 0 auto;border:12px #8B4513 ridge; border-radius:6px;;height: 530px;background: url(https://icweiliimg1.pstatp.com/weili/bl/448249209752912031.jpg) 100% fixed; }
#Ellipse {position:relative;visibility:visible;z-index:1;width:800px;height:80px;border:none;margin-top:280px;margin-bottom:100px;float: left;margin-left:80px;}
.RotatingIcon {border: none;width: 100px;}
.left {background-color : #FFD700;width: 30px;height: 44px; border:2px #FF4A20 solid;display: block;float: left;margin-right: 50px;margin-top:0px;z-index: 99;}
.right {background-color : #FFD700;width: 30px; height: 44px; border:2px #FF4A20 solid;display: block;float: left; margin-left: 40px; margin-top: 0px; z-index: 99;}
</style>

<script src="http://demo.htmleaf.com/1609/201609251651/js/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="InitScripts()">
<div class="mod-a">
<div style="position:relative; margin-top:0px; margin-left:0px;left:350px ;"><h1>金　陵　十　二　钗</h1> </div>
<input class="left" type="button" name="" value="顺" onclick="IRJS_StartRotation('Ellipse',1);"> 
<div id="Ellipse">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289495.jpg ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af5f6ae4f77d35274689.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746a8.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746c7.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746e5.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746f9.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af776ae4f77d3527fc9b.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcb0.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcc5.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af776ae4f77d3527fce5.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af776ae4f77d3527fd03.gif ">
<img class="RotatingIcon" src=" https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289465.gif ">
</div>
<input class="right" type="button" name="" value="逆" onclick="IRJS_StartRotation('Ellipse',-1);"> 
</div>
<audio autoplay="autoplay" loop="loop" src="http://url.amp3a.com/kuwo.php/154213486.mp3" type="audio/mpeg"></audio>
</body>
</html>

菡萏 · 发表于 2021-8-15 22:42

<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="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);"> 


<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);"> 
</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-21 20:05

欣赏老师佳作！

帐号		自动登录	找回密码
密码			注册会员

大郎该吃药了【3D旋转图片】

评分

点评