<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>【酷】JS+CSS打造沿Y轴纵深运动的3D球体</title>

<style type="text/css">

	html {

		overflow: hidden;

	}

	body {

		margin: 0px;

		padding: 0px;

		background: #111;

		position: absolute;

		width: 100%;

		height: 100%;

	}

	#screen {

		position:absolute;

		left: 0%;

		top: 0%;

		width: 100%;

		height: 100%;

		background: #000;

		overflow: hidden;

		cursor: pointer;

	}

	#screen img {

		position: absolute;

	}

	#vb {

		position: absolute;

		border-left: #666 solid 1px;

		left: 50%;

		top: 10%;

		height: 80%;

		z-index: 1000;

	}

	#title {

		position: absolute;

		color: #fff;

		font-family: arial;

		font-weight: bold;

		font-size: 1.5em;

		text-align: center;

		width: 100%;

		bottom: 1em;

	}

</style>

<script type="text/javascript">

r3d = {

	spd  : .03,

	max  : 160,

	O    : [],

	num  : 0,

	down : false,

	xm   : 0,

	ym   : 0,

	xb   : 0,

	yb   : 0,

	scr  : 0,

	R    : 0,

	N    : 0,

	Im   : 0,

	img  : 0,

	nx   : 0,

	ny   : 0,

	nw   : 0,

	init : function ()

	{

		this.scr = document.getElementById('screen');

		this.img = document.getElementById('particles').getElementsByTagName('img');

		this.scr.onselectstart = function () { return false; }

		this.scr.ondrag        = function () { return false; }

		this.scr.onmousemove   = function (e)

		{

			if (r3d.down)

			{

				if (window.event) e = window.event;

				var xm = e.clientX - r3d.nx;

				var ym = e.clientY - r3d.ny;

				if (Math.abs(xm - r3d.xb) + Math.abs(ym - r3d.yb) > r3d.img[r3d.Im % r3d.img.length].width)

				{

					var o;

					if (r3d.N < r3d.max)

					{

						o = document.createElement('img');

						r3d.scr.appendChild(o);

						r3d.O[r3d.N % r3d.max] = o;

					}

					else o = r3d.O[r3d.N % r3d.max];

					var i = r3d.img[r3d.Im % r3d.img.length];

					if (xm < r3d.nw)

					{

						o.X = r3d.nw - xm;

						o.c = -r3d.R - Math.PI / 2;

					} else {

						o.X =  xm - r3d.nw;

						o.c = -r3d.R + Math.PI / 2;

					}

					o.src = i.src;

					o.w = Math.round(i.width / 2);

					o.style.top = Math.round(ym - o.height / 2) + 'px';

					o.style.left = "-9999px";

					r3d.N++;

					r3d.xb = xm;

					r3d.yb = ym;

				}

			}

			return false;

		}

		this.scr.onmousedown = function (e)

		{

			r3d.down = true;

			r3d.xb = r3d.yb = -999;

			return false;

		}

		this.scr.onmouseup   = function (e)

		{

			r3d.down = false;

			r3d.Im++;

			if(r3d.N > 10) document.getElementById('title').innerHTML = "";

			return false;

		}

		r3d.resize();

		r3d.run();

	},

	resize : function () {

		var o = r3d.scr;

		r3d.nw = o.offsetWidth / 2;

		for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent)

		{

			r3d.nx += o.offsetLeft;

			r3d.ny += o.offsetTop;

		}

	},

	run : function ()

	{

	    r3d.R += r3d.spd;

		for (var i = 0, o; o = r3d.O[i]; i++)

		{

			o.style.left = Math.round(r3d.nw + o.X * Math.sin(r3d.R + o.c) - o.w * .5) + 'px';

			o.style.zIndex = 1000 + Math.round(2 * o.w + (Math.abs(o.X) * Math.cos(r3d.R + o.c)));

		}

		setTimeout(r3d.run, 32);

	}

}

onload = function()

{

	onresize = r3d.resize;

	r3d.init();

}

</script>

</head>

<body>

<div id="screen">

<div id="title">点击或者在屏幕上画线，就看到效果了</div>

<div id="vb"></div>

</div>

<div id="particles" style="visibility:hidden">

	<img alt="" src="/images/20110926/mb1.gif">

	<img alt="" src="/images/20110926/mb2.gif">

	<img alt="" src="/images/20110926/mb3.gif">

	<img alt="" src="/images/20110926/mb4.gif">

</div>

<br />

<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>

</body>

</html>

【酷】JS+CSS打造沿Y轴纵深运动的3D球体的更多相关文章

  1. JS+CSS打造三级折叠菜单，自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  3. GJM ：JS + CSS3 打造炫酷3D相册 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  4. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  5. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

  6. Chart.js Y轴数据以百分比展示

    新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽 ...

  7. css y轴溢出滚动条，x轴溢出显示

    这个是我工作中遇到的一个问题,困扰了我好几天,彻底理解了什么叫思路很重要. 黄色盒子里的内容是要超出出现滚动条的,红色的方块是根据另外的元素去定位的,于是呢 我就加上了 overflow-y:auto ...

  8. js 把x,y轴两个数组变成[[x,y],[x,y]]的二维数组

    例如有X轴数组xarr=[2006,2007,2008],Y轴数组yarr=[12,15,18],代码如下: //调用 mergexy([2006,2007,2008],[12,15,18]); // ...

  9. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

随机推荐

  1. 11.15luffycity(7)

    2018-11-15 17:43:50 还有一点路飞项目就结束啦! 周日打算回去! 双十一的耳机到啦,音质确实不错!2333! 等着项目做完,完整总结一下! 越努力,越幸运!永远不要高估自己!!!! ...

  2. Win10, VS2017环境下OpenCV3.4.2的配置

    从官网https://opencv.org/releases.html下载OpenCV3.4.2的Win pack进行安装,安装目录便如下图所示: 要能在Visual Studio中使用上述安装的Op ...

  3. ArcGIS Runtime For Android setViewpointCenterAsync(Point center, double scale)效果奇葩,不响应

    最近做一个东西,用的是ArcGIS Runtime Sdk for Android 100.1.0,由于刚用这个版本,理解不够,出现了一个奇葩问题 在对FeatureLayer进行Query之后,想要 ...

  4. C++多态等知识点

    分清虚函数和纯虚函数的区别:(1).虚函数是函数前加关键字virtual,一般定义格式为:virtual 类型 函数名 (参数表){ 函数体 } (2).纯虚函数的生命格式为: virtual 类型 ...

  5. [ERROR] Terminal initialization failed; falling back to unsupported

    Logging initialized using configuration in jar:file:/usr/local/hive/lib/hive-common-1.2.2.jar!/hive- ...

  6. 《Python编程》课程报告 python技术在数据分析中的应用之网络爬虫

      摘要:... 2 1       引言 :... 2 1.1课题研究背景和研究现状... 2 1.1.1课题背景和目的... 3 1.1.2研究现状... 4 1.1.2.1语言... 4 1.1 ...

  7. python语法_字符类型

    str(string): 字符串   str(被转换的数据) int(interger):整数   int(被转换的数据)

  8. python全栈开发 * 27知识点汇总 * 180710

    27   time  os  sys  模块 time 模块 一.表示时间的三种方式 时间戳(timestamp), 元组(struct_time),格式化时间字符串(Format string) 小 ...

  9. socket 编程中。 服务端用到多线程

    客户端连接服务端之后, 服务端会生成与客户端交换信息的socket. 在服务端实现多线程: 为每个连接创建一个线程进行信息交换. import threading from socket import ...

  10. [No0000199]设计模式总结

    设计模式之间的关系: 设计模式总概况: 一.设计原则 .单一职责原则 一个类,只有一个引起它变化的原因.应该只有一个职责.每一个职责都是变化的一个轴线,如果一个类有一个以上的职责,这些职责就耦合在了一 ...