当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Vml+Dhtml:小小的页面效果,叫它"淘气鬼"好了

Javascript
QQ邮箱的一个文本编辑器代码
Z-Blog中用到的js代码
绝对经典的滑轮新闻显示(javascript+css)实现
用js实现的仿sohu博客更换页面风格(简单版)
仿Vista进程条效果
用Javascript判断图片是否存在,不存在则显示默认图片的代码
用JQuery 实现的自定义对话框
jQuery使用手册之三 CSS操作
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
贴图转换+转贴工具用到的js代码超级推荐
超级简单的图片防盗(HTML),好用
现代 javscript 编程 资料
超级可爱纯js网页时钟
Dojo之路:如何利用Dojo实现Drag and Drop效果
AJAX架构之Dojo篇
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
使用prototype.js 的时候应该特别注意的几个问题.
一个已封装好的漂亮进度条
漂亮的widgets,支持换肤和后期开发新皮肤
用javascript实现的仿Flash广告图片轮换效果

Javascript 中的 Vml+Dhtml:小小的页面效果,叫它"淘气鬼"好了


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

<HTML xmlns:v>
<HEAD>
<META http-equiv='Content-Type' content='text/html;charset=gb2312'>
<Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2004'>
<meta name="DownLoad URL" content="http://www.lshdic.com/downlshdic.asp">
<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' bgcolor=black style='border:1 solid green'>
<BASE target='_top'>
<TABLE id='' bgcolor='' cellspacing='2' cellpadding='2' border='1' width='300' height='300' style='color:white'>
<TR>
<TD>普通HTML内容</TD>
<TD>普通HTML内容</TD>
</TR>
<TR>
<TD>普通HTML内容</TD>
<TD>普通HTML内容</TD>
</TR>
</TABLE>
<v:Oval fillcolor='green' id=oval1 style='position:absolute;width:100;height:100;z-index:6'> <!--制作一个渐变形状-->
<v:Stroke color='white'/>  <!--这是边框可以不要-->
<v:fill type='gradientradial' opacity='0' color2='yellow' id='fill1'/>
</v:oval>
<script>
//原作:风云舞,载自http://www.lshdic.com/bbs
//没什么无聊写着玩,叫它“淘气鬼”好了,放在网页中也很有意思呵呵
var wid,hei //定义全局存储变量,主要为提高速度
wid=document.body.offsetWidth-50;hei=document.body.offsetHeight-50  //首次启动将宽与高放进变量
function document.onmousemove(){  //鼠标移动时
oval1.style.left=Math.abs(wid-event.x-50);oval1.style.top=Math.abs(hei-event.y-50); //物体位置
temp1=Math.round(100/(wid/event.x));temp2=Math.round(100/(hei/event.y)) //计算X与Y的百分比
fill1.focusposition=temp1+"%,"+temp2+"%";fill1.focussize=temp1/9+"%,"+temp2/9+"%";oval1.style.width=100+Math.abs(temp1-50);oval1.style.height=100+Math.abs(temp2-50) //更新物体形状
}
function window.onresize(){
wid=document.body.offsetWidth-50;hei=document.body.offsetHeight-50 //窗体改变大小时刷新变量
}
</script>
</BODY>
</HTML>