js实现三维文字环绕鼠标交互菜单效果代码-html代码-BFW代码库

js实现三维文字环绕鼠标交互菜单效果代码

代码语言：html

代码描述：js实现三维文字环绕鼠标交互菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
HTML {
  OVERFLOW: hidden
}
BODY {
  POSITION: absolute;
  PADDING-BOTTOM: 0px; 
  MARGIN: 0px; 
  PADDING-LEFT: 0px; 
  WIDTH: 100%; 
  PADDING-RIGHT: 0px; 
  BACKGROUND: #fff; 
  HEIGHT: 100%; 
  PADDING-TOP: 0px
}
#screen {
  POSITION: absolute; 
  WIDTH: 100%; 
  BACKGROUND: #fff; 
  HEIGHT: 100%; 
  OVERFLOW: hidden; 
  TOP: 0%; 
  LEFT: 0%
}
#screen DIV {
  POSITION: absolute; 
  FONT-FAMILY: "courier new", typewriter, matrix, monospace; 
  COLOR: #000; 
  CURSOR: default; 
  FONT-WEIGHT: bold; 
  TEXT-DECORATION: none
}
A {
  POSITION: absolute; 
  FONT-FAMILY: "courier new", typewriter, matrix, monospace; 
  COLOR: #000; 
  CURSOR: default; 
  FONT-WEIGHT: bold; 
  TEXT-DECORATION: none
}
</style>




</head>

<body>
  <div id="screen"></div>

  
      <script >

/* ==== mouse position event ==== */
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
	if (window.event) e=window.event;
	xm = e.clientX;
	ym = e.clientY;
}

/* ==== resize event ==== */
function resize() {
	tdm.resize();
}
onresize = resize;

var tdm = {
//////////////////////
	FOCAL : 250,
	ZOOM  : .03,
//////////////////////
	CX : 0,
	CY : 0,

	/* ==== resize ==== */
	resize : function()
	{
		tdm.nw = this.scr.offsetWidth;
		tdm.nh = this.scr.offsetHeight;
		tdm.nx = 0;
		tdm.ny = 0;
		for (var o = tdm.scr; o != null; o = o.offsetParent)
		{
			tdm.nx += o.offsetLeft;
			tdm.ny += o.offsetTop;
		}
	},

	/* ==== main loop ==== */
	run : function ()
	{
		tdm.CX += (xm - tdm.CX) * .1;
		tdm.CY += (ym - tdm.CY) * .1;
		.........完整代码请登录后点击上方下载按钮下载查看