当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Vml:应用阿基米德算法在网页制作动画,原程+注释

Javascript
表格 隔行换色升级版
JavaScript 变量基础知识
fileupload控件 文件类型客户端验证实现代码
extjs DataReader、JsonReader、XmlReader的构造方法
让Firefox支持event对象实现代码
CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例
JQuery 图片延迟加载并等比缩放插件
Jquery作者John Resig自己封装的javascript 常用函数
js 鼠标拖动对象 可让任何div实现拖动效果
页面中js执行顺序
Javascript select下拉框操作常用方法
jQuery 常见学习网站与参考书
javascript currying返回函数的函数
prototype 中文参数乱码解决方案
为javascript添加String.Format方法
asp.net HttpHandler实现图片防盗链
Riot.js 快速的JavaScript单元测试框架
Javascript实现的CSS代码高亮显示
Js 实现表格隔行换色一例

Javascript 中的 Vml:应用阿基米德算法在网页制作动画,原程+注释


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 199 ::
收藏到网摘: n/a

<HTML xmlns:v>
<HEAD>
<META http-equiv='Content-Type' content='text/html;charset=gb2312'>
<Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2004'>
<TITLE>网页标题</TITLE>
<STYLE>
v\:*{behavior:url(#default#VML);}  //声明变量v为VML对象
*{font-size:12px;color:;}
a{text-decoration:none;}
a:hover{color:red;}
</STYLE>
</HEAD>
<BODY topmargin='2' leftmargin='2'>
<BASE target='_top'>
<div id=a style='table-Layout:fixed;width:100%;height:100%;border:1 solid black'></div>
<script>
 //原作:风云舞,载自:http://www.lshdic.com/bbs
 //以前在VB里很容易利用阿基米德绘图,这次是DHTML版的,VB的下载来http://image.chinaitpower.com/files/20030817/10068.rar
var pos1=0,cos1=0,sin1=0,buchang=1,line1,wid1,hei1,color1  //定义全局变量,为提高运行速度
wid1=a.offsetWidth/2
hei1=a.offsetHeight/2  //预装载宽与高,为提高运行速度
function add1(){
if(pos1==0){buchang=Math.round(Math.random()*5)+1;color1="rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"}    //初始化时,定义一个随机步长,为达到各种效果
if(pos1<200)pos1+=buchang;else{pos1=0;a.innerHTML="";line1=null;wid1=a.offsetWidth/2;hei1=a.offsetHeight/2}  //递加或者初始化
var line1=document.createElement('V:LINE')   //创建一条新线段
line1.style.position='absolute'
line1.style.left=wid1
line1.style.top=hei1
line1.strokecolor=color1
line1.to=pos1*Math.cos(pos1)+","+pos1*Math.sin(pos1)  //应用阿基米德算法,产生规则角度的线段
a.appendChild(line1);document.title=pos1;             //OK,增加线段
}
setInterval('add1();',30)   //30毫秒增加一次,注意30毫秒如果超过30条线以上,低于30毫秒对于使用低CPU处理器用户吃不消
</script>
</BODY>
</HTML>