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;
		for (var i = 0, o; o = tdm.obj[i]; i++)
		{
			var dx = o.X - tdm.CX + tdm.nx;
			var dy = o.Y - tdm.CY + tdm.ny;
			var d  = Math.sqrt(dx * dx + dy * dy);
			var z  = (tdm.FOCAL - d) / tdm.FOCAL * (o.S * .1);
			var s  = Math.max(0, o.S + (50 - d * .1) * (o.S * tdm.ZOOM));
			var x  = o.X + dx * z - s * .5;
			var y  = o.Y + dy * z - s * .5;
			if(x > -s * .5 && x < tdm.nw && y > -s && y < tdm.nh){
				o.style.left     = Math.round(x)  + 'px';
				o.style.top      = Math.round(y)  + 'px';
				o.style.fontSize = Math.round(s) + 'px';
				o.style.zIndex   = Math.round(1000 + z);
			} else o.style.left  = '-1000px';
		}
		setTimeout(tdm.run, 16);
	},

	/* ==== initialization ==== */
	init : function (container, objects)
	{
		this.scr = document.getElementById(container);
		this.obj = [];
		var k = 0;
		for (v.........完整代码请登录后点击上方下载按钮下载查看