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

更新时间：2008年02月26日 23:51:22 作者：

js vml制作的3D效果

<html xmlns:v="urn:schemas-microsoft-com:vml"> <STYLE> v\:* { Behavior: url(#default#VML) } body{margin:0px} </STYLE> <BODY> <table width="100%" height=500 border="0" cellspacing="0" cellpadding="0">   <tr>     <td style="border:1px solid #000" align=center>         <v:group id=group style="WIDTH:700px;POSITION:relative;HEIGHT:500px" coordsize="600,400">             <span id=box></span><span id=ren></span>         </v:group>     </td>   </tr> </table> <div align=center> <button onclick="Run(+5);">向左旋转</button> <button onclick="Stop();" style="margin:0px 20px;">暂停旋转</button> <button onclick="Run(-5);">向右旋转</button> </div> </BODY> </HTML> <script> 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<l.length;i++){         str+="<v:line from =\""+getxy(v[l[i][0]])+"\" to = \""+getxy(v[l[i][1]])+"\" strokeColor=\"Gray\"/>"     }     $("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<lr.length;i++){         str+="<v:line from =\""+getxy(v[lr[i][0]])+"\" to = \""+getxy(v[lr[i][1]])+"\">"         if(i==0)             str+="<v:stroke StartArrow=\"Oval\"/>"         str+="</v:line>"     }     $("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) </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS基于onclick事件实现单个按钮的编辑与保存功能示例
这篇文章主要介绍了JS基于onclick事件实现单个按钮的编辑与保存功能,结合实例形式分析了JS实现onclick响应事件的转换相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2017-02-02
JS转换金额大写方法详细例子
在处理财务账款类需求时需要将转账金额写成大写的,下面这篇文章主要给大家介绍了关于JS转换金额大写方法的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
2023-10-10
JS 获取span标签中的值的代码支持ie与firefox
JS获取span标签中的值的代码，在实际应用中经常用的到的功能，原理很简单，大家可以拓展下。
2009-08-08
layui 实现表格某一列显示图标
今天小编就为大家分享一篇layui 实现表格某一列显示图标的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Webpack框架核心概念(知识点整理)
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。这篇文章主要介绍了Webpack框架核心概念(知识点整理),需要的朋友可以参考下
2017-12-12
js实现左侧网页tab滑动门效果代码
这篇文章主要介绍了js实现左侧网页tab滑动门效果代码,涉及JavaScript页面元素的遍历及元素属性动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
js实现继承的方法及优缺点总结
这篇文章主要给大家介绍了关于js实现继承的方法及优缺点的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
原生javascript实现匀速运动动画效果
这篇文章主要为大家详细介绍了原生javascript实现匀速运动动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02
javascript权威指南学习笔记之javascript数据类型
JavaScript中允许使用三种基本数据类型数字，文本字符和布尔值。其中数字包括符点数.此外，它还支持两种小数据类型－null(空)和undefined(未定义)，该两种小数据类型，它们各自只定义了一个值。
2011-09-09
微信小程序实现时间轴
这篇文章主要为大家详细介绍了微信小程序实现时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05