js+vml创建3D页面效果代码

v\:* { Behavior: url(#default#VML) }
body{margin:0px}

向左旋转
暂停旋转
向右旋转

var q=40;
var r=(q*3.1415926)/180
var v=new Array()
var l=new Array()
v[0]="0,400,0"
v[1]="100,350,15"
v[2]="200,400,0"
v[3]="0,400,300"
v[4]="100,350,285"
v[5]="200,400,300"
v[6]="30,400,30"
v[7]="30,450,30"
v[8]="170,450,30"
v[9]="170,400,30"
v[10]="30,400,270"
v[11]="30,450,270"
v[12]="170,450,270"
v[13]="170,400,270"
v[14]="170,410,210"
v[15]="170,450,210"
v[16]="170,410,230"
v[17]="170,450,230"
v[18]="170,400,100"
v[19]="170,430,100"
v[20]="170,400,130"
v[21]="170,430,130"
v[22]="170,415,100"
v[23]="170,415,130"
v[24]="170,400,115"
v[25]="170,430,115"
v[26]="400,410,0"
v[27]="400,415,0"
v[28]="400,430,0"
v[29]="390,420,5"
v[30]="410,420,0"
v[31]="390,450,5"
v[32]="410,450,0"
l[0]=Array(0,1)
l[1]=Array(1,2)
l[2]=Array(2,0)
l[3]=Array(3,4)
l[4]=Array(4,5)
l[5]=Array(5,3)
l[6]=Array(0,3)
l[7]=Array(1,4)
l[8]=Array(2,5)
l[9]=Array(6,7)
l[10]=Array(7,8)
l[11]=Array(8,9)
l[12]=Array(10,11)
l[13]=Array(11,12)
l[14]=Array(12,13)
l[15]=Array(7,11)
l[16]=Array(8,12)
l[17]=Array(14,15)
l[18]=Array(14,16)
l[19]=Array(16,17)
l[20]=Array(18,19)
l[21]=Array(18,20)
l[22]=Array(19,21)
l[23]=Array(20,21)
l[24]=Array(22,23)
l[25]=Array(24,25)
var lr=new Array()
lr[0]=Array(26,28)
lr[1]=Array(27,29)
lr[2]=Array(27,30)
lr[3]=Array(28,31)
lr[4]=Array(28,32)
function $(obj){return document.getElementById(obj)}
function getxy(s){
var t=s.split(",")
var a=new Array()
a[0]=t[0]-0+t[2]*Math.cos(r)
a[1]=t[1]-t[2]*Math.sin(r)
return a.join()
}
function setline(){
var str=""
for(var i=0;i"
}
$("box").innerHTML=str
}
function set_jd(s){
q=s
r=(q*3.1415926)/180
setline()
set_ren()
}
function set_ren(){
var str=""
for(var i=0;i"
if(i==0)
str+=""
str+=""
}
$("ren").innerHTML=str
}

var timer;
function Run (n)
{
Stop();
timer = window.setInterval(function(){set_jd(q+n)},200);
}
function Stop ()
{
window.clearInterval(timer);
}
setline()
set_ren()
Run(+1)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js实现3D图片展示效果

    点击左上角的按钮前后切换 效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0; list-style:none;} ul{ width:300px; height:300px; margin:100px auto; positi

  • 基于javascript html5实现3D翻书特效

    这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果.书本中的文字和图片也会3D展示,非常酷. 在线演示 源码下载 HTML代码 <div class="book p3d"> <div class="back-cover p3d"> <div class="page back flip"></div> <div

  • JS实现的3D拖拽翻页效果代码

    本文实例讲述了JS实现的3D拖拽翻页效果.分享给大家供大家参考,具体如下: 以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法.感谢原创作者的创意,结果一样,但过程不一样哦.奉上代码,供大家参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

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

    本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

  • 原生javascript+css3编写的3D魔方动画旋扭特效

    一直从事于后端编程工作,工作中也经常接触和使用一些前端技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用css3

  • 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

  • 纯JS实现旋转图片3D展示效果

    CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type

  • js模拟3D场景效果代码打包

    要在二维空间模拟出三维的效果,就需要把三维的坐标转换成二维坐标.一个最基本依据是:东西越远,看到大小就越小,坐标越往消失点靠拢. 透视公式: scale = fl / (fl + z); scale是大小的比例值,0.0到1.0之间,fl是观察点到成像面的距离,通常这个值是固定,z就是物件的三维空间中的z轴. 在写这些代码之前,我喜欢用面向对象来描述我写的这些东西,比如我需要一个场景,场景是个空间,空间内是可以容纳各种物件的,物件是个对象,物件是是x,y,z三个维度的,场景可以插入任意多的物件,

  • js实现3D图片环展示效果

    可对整体进行拖拽 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0;margin:0; font-family: "Proxima Nova","proxima-nova&qu

  • js实现3D图片逐张轮播幻灯片特效代码分享

    本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下 <head> <meta http-equiv="Content-Type

随机推荐