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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
php中文本操作的类
2007/03/17 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
python通过文件头判断文件类型
2015/10/30 Python
Python 类的继承实例详解
2017/03/25 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python样条插值的实现代码
2018/12/17 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
python中自带的三个装饰器的实现
2019/11/08 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
2014年教师节寄语
2014/04/03 职场文书
学生保证书范文
2014/04/28 职场文书
教师业务学习材料
2014/12/16 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
python中pandas对多列进行分组统计的实现
2021/06/18 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL