JavaScrip实现3D旋转动态效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" content=""/>
<title>图片旋转展示</title>
<style type="text/css">
#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>
<script type="text/javascript" language="javascript">
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>
<input id="l" type="button" value="left" />
<input id="r" type="button" value="right" />
<div id="show">
<div class="item">
<img src="protosite/images/bg15.png" style="width:100%;height:100%" alt=""/>
</div>
<div class="item">
<img src="protosite/images/bg16.png" style="width:100%;height:100%" alt=""/>
</div>
<div class="item">
<img src="protosite/images/bg17.png" style="width:100%;height:100%" alt=""/>
</div>
<div class="item">
<img src="protosite/images/bg18.png" style="width:100%;height:100%" alt=""/>
</div>
<div class="item">
<img src="protosite/images/bg15.png" style="width:100%;height:100%" alt=""/>
</div>
<div class="item">
<img src="protosite/images/bg15.png" style="width:100%;height:100%" alt=""/>
</div>
<div class="item">
<img src="protosite/images/bg16.png" style="width:100%;height:100%" alt=""/>
</div>
<!--<div class="item">8</div>
<div class="item">9</div>
<div class="item">0</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</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> ...
随机推荐
- August 29th 2016 Week 36th Monday
Every has the capital to dream. 每个人都有做梦的本钱. Your vision, our mission. That is an advertisment of UMo ...
- Oracle双实例切换
1.在Linux下切换: export ORACLE_SID=xxx1 sqlplus "/as sysdba" //进入sql startup //启动数据库实例1 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Java中length,length(),size()区别
length属性:用于获取数组长度. eg: int ar[] = new int{1,2,3} /** * 数组用length属性取得长度 */ int lenAr = ar.length;//此处 ...
- .NET开发工具之Excel导出公共类
来源:Pino晨 链接:cnblogs.com/chenxygx/p/5954870.html 说明 最近接了一个任务,就是做一个列表的Excel导出功能.并且有很多页面都会使用这个功能. 导出的Ex ...
- 微信支付 - V3支付问题
参考资料:http://www.2cto.com/weixin/201506/407690.html 1.微信公众号支付出错: 当前页面的URL未注册: get_brand_wcpay_reque ...
- 关于python装饰器（Decorators）最底层理解的一句话
一个decorator只是一个带有一个函数作为参数并返回一个替换函数的闭包. http://www.xxx.com/html/2016/pythonhexinbiancheng_0718/1044.h ...
- python中多线程与非线程的执行性能对比
此对比说明了一件事: 如果是IO型应用,多线程有优势, 如果是CPU计算型应用,多线程没必要,还有实现锁呢. #!/usr/bin/env python # -*- coding: utf-8 -*- ...
- [译]关于.NET Core1.1的通告
以下翻译可能会有不准确的地方, 想看原文的童鞋移步到Announcing .NET Core 1.1, 微软的开源真心喜欢, 希望有更多的童鞋关注微软, 关注.NET Core 我们很兴奋地宣布.NE ...
- Async/Await 最佳实践
其实好久以前就看过这个文章,以及类似的很多篇文章.最近在和一个新同事的交流中发现原来对async的死锁理解不是很透彻,正好最近时间比较充裕就再当一回搬运工. 本文假定你对.NET Framework ...