<!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旋转动态效果的更多相关文章

  1. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  2. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

  3. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  4. CSS3——3D旋转图(跑马灯效果图)

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  5. Flash相册-------3D旋转应用

    1.图层一,图片1,转换为元件 2.3D旋转工具,变形--->y->180

  6. 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)上

    这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...

  7. Android 滑动效果进阶篇(五)—— 3D旋转

    前面介绍了利用Android自带的控件,进行滑动翻页制作效果,现在我们通过代码实现一些滑动翻页的动画效果. Animation实现动画有两个方式:帧动画(frame-by-frame animatio ...

  8. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  9. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

随机推荐

  1. Mybatis 学习笔记1

    ---恢复内容开始--- 什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获 ...

  2. java annotation

    import java.lang.annotation.Documented; import java.lang.annotation.ElementType; import java.lang.an ...

  3. BeatifulSoup文档地址

    http://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html

  4. C语言文件操作相关函数

    在实际应用中,我们往往需要对文件进行操作,下面我将介绍C语言的一些关于操作文件的函数. 一.计算机文件 计算机文件是以计算机硬盘为载体存储在计算机上的信息集合,是存储在某种长期储存设备上的一段数据流. ...

  5. Swift - 状态栏颜色显示(字体、背景)

    ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分,要分清这两个概念,后面会用到: 前景部分:就是指的显示电池.时间等部分: 背景部分:就是显示黑色或者图片的背景部分: 如下图:前景 ...

  6. Retrofit与RXJava整合

    Retrofit 除了提供了传统的 Callback 形式的 API,还有 RxJava 版本的 Observable 形式 API.下面我用对比的方式来介绍 Retrofit 的 RxJava 版 ...

  7. Loadrunner连接Mysql数据库

    1.库文件下载地址:http://files.cnblogs.com/files/xiaoxitest/MySQL_LoadRunner_libraries.zip 分别添加到Loadrunner b ...

  8. 三、jQuery--jQuery基础--jQuery基础课程--第9章 jQuery 常用插件

    1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({option ...

  9. PHP中 字符串 常用函数

    //strpos    查找字符串中是否含有字符 $str='abcde'; $char='a':   if(strpos($str,$char) !==false){    echo '含有',$c ...

  10. 数据结构和算法 – 5.模式匹配和文本处理

    了使用正则表达式,需要把 RegEx 类引入程序.大家可以在 System.Text.RegularExpression 名字域中找到这种类.一旦把这种类导入了程序,就需要决定想要用 RegEx 类来 ...