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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
DIV始终居中的js代码
Feb 17 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
PHP源码之explode使用说明
2011/08/05 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
javascript时间差插件分享
2016/07/18 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue webpack打包优化操作技巧
2018/02/22 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
以windows service方式运行Python程序的方法
2015/06/03 Python
python实现多线程网页下载器
2018/04/15 Python
Python阶乘求和的代码详解
2020/02/14 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
python 实现简易的记事本
2020/11/30 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
梅花魂教学反思
2014/04/25 职场文书
关于运动会的口号
2014/06/07 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB