<!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. javascript：没有定义的变量和没有定义的属性

    1. 没有定义的变量 window.onload = function() { alert(a); // 报错: Uncaught ReferenceError: a is not defined / ...

  2. Easy UI combogrid动态加载数据

    场景: datagrid的每一行允许编辑,一行中有一个字段,编辑时,提供下拉框选项,供选择. 下拉框选项有多个列.如下图所示:(点击红框内的下拉按钮,会弹出绿框内的内容) 要求: 每行弹出的下拉框内容 ...

  3. vue使用mockjs配置步骤(无需启动node服务)

    1.安装好mockjs命令行 npm install mockjs 2.在项目中引用mockjs [ 重要 ] ##在项目src目录下新建一个mock文件夹 ##在mock文件夹下新建 index.j ...

  4. JavaCC从入门到出门

    一.JavaCC JavaCC是java的compiler compiler.JavaCC是LL解析器生成器,可处理的语法范围比较狭窄,但支持无限长的token超前扫描. 安装过程: 我是从githu ...

  5. 如何优雅的选择字体(font-family)

    大家都知道,在不同操作系统.不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?下面我们逐步的分析一下: 一.首先我们看看各 ...

  6. java高级---->Java观察者的原理

    观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态上发生变化时,会通知所有观察者对象,让他们能够自动更新自己.今天我们通过模拟按钮的处理事件来深入Java ...

  7. css特效 - 环形文字

    记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...

  8. linux下tar命令的常用实例

    语法:tar [主选项+辅选项] 文件或者目录 使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项:c 创建新的档案文件.如果用户想备份一个目录或是一些 ...

  9. cs231n笔记（二） 最优化方法

    回顾上一节中,介绍了图像分类任务中的两个要点: 假设函数.该函数将原始图像像素映射为分类评分值. 损失函数.该函数根据分类评分和训练集图像数据实际分类的一致性,衡量某个具体参数集的质量好坏. 现在介绍 ...

  10. Spring-boot(二）--thymeleaf

    @Controller @RequestMapping("/") public class MessageController { private final MessageRep ...