JS实现3D图片旋转展示效果代码


Posted in Javascript onSeptember 22, 2015

本文实例讲述了JS实现3D图片旋转展示效果代码。分享给大家供大家参考。具体如下:

这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做。本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便。

运行效果截图如下:

JS实现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" content="text/html; charset=utf-8" />
<title>图片旋转展示</title>
<style>
#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>
var len;
var showerObj;
var listObj;
var showerWidth=800;
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">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</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>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
用vue设计一个日历表
Dec 03 Vue.js
JS+CSS实现带小三角指引的滑动门效果
Sep 22 #Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 #Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 #Javascript
jQuery实现的经典滑动门效果
Sep 22 #Javascript
jquery实现的简单二级菜单效果代码
Sep 22 #Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 #Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php 表单验证实现代码
2009/03/10 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python 剪切移动文件的实现代码
2018/08/02 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
python类共享变量操作
2020/09/03 Python
教师岗位职责范本
2013/12/29 职场文书
高校十八大报告感想
2014/01/27 职场文书
元旦联欢会感言
2014/03/04 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
普通党员对照检查材料
2014/09/24 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
无线电知识基础入门篇
2022/02/18 无线电