JS实现三维(三维的缩写)图片旋转展示效果代码

本文实例讲述了射流研究…实现三维(三维的缩写)图片旋转展示效果代码。分享给大家供大家参考。具体如下：

这是一段Java脚本语言代码，围绕成三维(三维的缩写)模型样式的Java脚本语言图片旋转展示代码，这里为了演示方便，将图片替换成了数字，预留出了图片的位置，这样速度快些，会超文本标记语言的朋友都知道用时候该怎么做。本图片旋转需要手功控制，每点击一下，图片旋转一次，很方便。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-3d-pic-scroll-show-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title图片旋转展示/title style # show { position : relative；余量：20px汽车；宽度宽度：800像素边界：1像素固体# 999999;}.项目{位置：绝对高度：40 px宽度：60 px背景技术： # 999999;border:1px实心# eeeeeecursor:pointer指针指针；}/stylescriptvar len；var showerObjvar listObjvar showerWidth=800 var shower h8=400 var r；var cR=0；var CCr=0；定义变量定时器=0;窗户。onload=function(){ showerObj=document。getelementbyid(' show ')；listObj=showerobj。getelementsbytagname(' div ')；len=listObj.lengthr=数学/180 * 360/len；for(var I=0；伊琳；I){ var item=ListObj[I]；项目。风格。top=淋浴h8/2数学。sin(r * I)*淋浴宽度/2-20 ' px '；项目。风格。left=showerWidth/2数学。cos(r * I)* showerWidth/2-30 ' px '；项目。旋转=(r * I ^ 2 *数学.PI)%(2 *数学. PI)；项目。onclick=function(){ cR=Math .PI/2-这个。旋转；timer || (timer=setInterval(旋转，10));} } var rX=淋浴obj。偏置淋浴宽度/2；var ry=淋浴对象。偏置淋浴h8/2；var rotate=function(){ CCr=(CCr 2 * Math).PI)%(2 *数学. PI)；if(cR-CCR 0)cR=cR ^ 2 *数学.PI；if(cR-ccRMath .PI){ CCr=CCr(cR-CCr)/19；}else{ ccR=ccR-(2*Math .PI CCr-cR)/19；} if(数学。ABS()(cR 2 *数学.PI)%(2 *数学PI)-(CCr 2 *数学(%)(2 *数学))数学/720){ CCr=cR；clearInterval(计时器);定时器=0;} for(var I=0；伊琳；I){ var item=ListObj[I]；var w，h；var SinR=数学。SiN(r * I CCr)；var CoSR=数学。CoS(r * I CCr)；w=600.6 * 60 * SinR；h=(400.6 * 40 * SinR)；项目。风格。CSS文本='；宽度： ' w ' px高度： ' h ' pxtop : ' parsent(淋浴h8/2 SinR *淋浴宽度/2/3-w/2)' px；左： ' parsent(showerWidth/2 CoSR * showerWidth/2-h/2)' px；z-index : ' ParSeint(淋浴h8/2 SinR *淋浴宽度/2/3-w/2 '；} } document.getElementById('l ').onclick=function(){ Cr=(Cr r ^ 2 * math .PI)%(2 *数学. PI)；timer || (timer=setInterval(旋转，10));} document.getElementById('r ').onclick=function(){ Cr=(Cr-r ^ 2 * math .PI)%(2 *数学. PI)；timer || (timer=setInterval(旋转，10));} rotate()；}/script/head dyinput id=' l ' type=' button ' value=' left ' input id=' r ' type=' button ' value=' right ' div id=' show ' div class=' item ' 1/div class=' item ' 2/div class=' item ' 3/div class=' item ' 4/div class=' item ' 5/div class=' item ' 6/div class=' item ' 7/div class=' item ' 8/div class=' item ' 9/div希望本文所述对大家的Java脚本语言程序设计有所帮助。