JavaScrip实现3D旋转动态效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>图片旋转展示</title>

#show{

position:relative;

margin:20px auto;

width:800px;

border:1px solid #999999;

}

.item{

position:absolute;

height:40px;

width:60px;

background:#999999;

border:1px solid #eeeeee;

cursor:pointer;

}

</style>

var len;

var showerObj;

var listObj;

var showerWidth = 500;//改变宽度

var showerHeight = 400;//改变高度

var r;

var cR = 0;

var ccR = 0;

var timer = 0;

window.onload = function () {

showerObj = document.getElementById("show");

listObj = showerObj.getElementsByTagName("div");

len = listObj.length;

r = Math.PI / 180 * 360 / len;

for (var i = 0; i < len; i++) {

var item = listObj[i];

item.style.top = showerHeight / 2 + Math.sin(r * i) * showerWidth / 2 - 20 + "px";

item.style.left = showerWidth / 2 + Math.cos(r * i) * showerWidth / 2 - 30 + "px";

item.rotate = (r * i + 2 * Math.PI) % (2 * Math.PI);

//单击某一项事件

item.onclick = function () {

cR = Math.PI / 2 - this.rotate;

timer || (timer = setInterval(rotate, 10));

}

var rX = showerObj.offsetLeft + showerWidth / 2;

var ry = showerObj.offsetTop + showerHeight / 2;

var rotate = function () {

ccR = (ccR + 2 * Math.PI) % (2 * Math.PI);

if (cR - ccR < 0) cR = cR + 2 * Math.PI;

if (cR - ccR < Math.PI) {

ccR = ccR + (cR - ccR) / 19;

} else {

ccR = ccR - (2 * Math.PI + ccR - cR) / 19;

}

if (Math.abs((cR + 2 * Math.PI) % (2 * Math.PI) - (ccR + 2 * Math.PI) % (2 * Math.PI)) < Math.PI / 720) {

ccR = cR;

clearInterval(timer);

timer = 0;

}

for (var i = 0; i < len; i++) {

var item = listObj[i];

var w, h;

var sinR = Math.sin(r * i + ccR);

var cosR = Math.cos(r * i + ccR);

w = 60 + 0.6 * 60 * sinR;

h = (40 + 0.6 * 40 * sinR);

item.style.cssText += ";width:" + w + "px;height:" + h + "px;top:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + "px;left:" + parseInt(showerWidth / 2 + cosR * showerWidth / 2 - h / 2) + "px;z-index:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + ";";

}

document.getElementById("l").onclick = function () {

cR = (cR + r + 2 * Math.PI) % (2 * Math.PI);

timer || (timer = setInterval(rotate, 10));

}

document.getElementById("r").onclick = function () {

cR = (cR - r + 2 * Math.PI) % (2 * Math.PI);

timer || (timer = setInterval(rotate, 10));

}

rotate();

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!--<div class="item">8</div>

</div>

</body>

</html>

JavaScrip实现3D旋转动态效果的更多相关文章

【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
3D旋转菜单
今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...
低调奢华 CSS3 transform-style 3D旋转
点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性以下是代码: <!DOCTYPE html ...
CSS3——3D旋转图（跑马灯效果图）
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
Flash相册-------3D旋转应用
1.图层一,图片1,转换为元件 2.3D旋转工具,变形--->y->180
【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上
这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写这个效果需要用到transform-style: preserve-3d. ...
Android 滑动效果进阶篇（五）—— 3D旋转
前面介绍了利用Android自带的控件,进行滑动翻页制作效果,现在我们通过代码实现一些滑动翻页的动画效果. Animation实现动画有两个方式:帧动画(frame-by-frame animatio ...
CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
纯CSS炫酷的3D旋转
<html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

随机推荐

你知道吗？Web的26项基本概念和技术
这是我在网上看到一篇不错的文章,拿出来与大家分享一下:希望有所帮助作者: 小鱼来源: 前端里发布时间: 2014-08-01 22:56 阅读: 10477 次推荐: 51 原文链 ...
001课-java_web开发入门
一.Tomcat服务器常见启动问题:(1).Java_home环境变量,由于tomcat服务器的bin目录中的一些jar文件必须使用到java类库,所以必须先配置Java_home环境变量.(2).端 ...
Jquery.Datatables td宽度太长的情况下，自动换行
在 td 里面加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可以将超出内容设为隐藏, overflow:hidden; whit ...
Java集合源码学习（二）ArrayList分析
>>关于ArrayList ArrayList直接继承AbstractList,实现了List. RandomAccess.Cloneable.Serializable接口,为什么叫&qu ...
重温WCF之构建一个简单的WCF（一）（2）通过Windows Service寄宿服务和WCF中实现操作重载
参考地址:http://www.cnblogs.com/zhili/p/4039111.html 一.如何在Windows Services中寄宿WCF服务第一步:创建Windows 服务项目,具体 ...
Delphi线程简介---Create及其参数、Resume、Suspend
TThread在Classes单元里的声明如下 type TThread = class private FHandle: THandle; FThreadID: THandle; FTerminat ...
谈谈Delph中的类和对象2---类可以理解成一种特殊的数据结构、类型转换
三.类可以理解成一种特殊的数据结构我们知道数据类型可以进行强制类型转换,类既然可以理解成一种数据类型,那么它也应该可以进行类型转换.比如下面代码为一个按钮(Button1)的单击事件 procedu ...
解决MYSQL错误：ERROR 1040 (08004): Too many connections
方法一: show processlist; show variables like 'max_connections'; show global status like 'max_used_conn ...
跨平台C的IDE
1.JetBrains的新跨平台C++ IDE,CLion已经开始EAP了,不过这货是收费的 http://confluence.jetbrains.com/display/CLION/Early+A ...
JavaScript - 事件流
事件流事件冒泡就是事件沿DOM树向上传播,在没一级节点上都会发生,直至传播到document对象. 事件捕获正好相反,但是老版本的浏览器不支持,因此很少有人使用事件捕获. 事件处理程序 HTMl 事 ...

JavaScrip实现3D旋转动态效果

JavaScrip实现3D旋转动态效果的更多相关文章

随机推荐

热门专题