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 相关文章推荐
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
javascript 回调函数详解
Nov 11 Javascript
微信JSSDK上传图片
Aug 23 Javascript
jquery datatable服务端分页
Aug 31 Javascript
简单分析javascript中的函数
Sep 10 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 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
php 随机排序广告的实现代码
2011/05/09 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
详解php命令注入攻击
2019/04/06 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python 对象中的数据类型
2017/05/13 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python groupby 函数 as_index详解
2019/12/16 Python
运行Python编写的程序方法实例
2020/10/21 Python
Python中pass的作用与使用教程
2020/11/13 Python
python中append函数用法讲解
2020/12/11 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
人事部主管岗位职责
2013/12/26 职场文书
社区十八大感言
2014/01/19 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
导游词之湖北武当山
2019/09/23 职场文书