<!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. 【Py-Github】根据条件筛选Github repo的例子

    条件: language:python commits:>100 contributors:>2 stars:>5 fork:0 实现: from github import Git ...

  2. thinphp5框架遇到 mkdir() Permission denied 解决办法

    网站重装 直接复制本地程序文件 里面数据库链接信息要改成线上的 然后mysql apache 等都没有动 运行后出现错误 mkdir() Permission denied 这是由于runtime目录 ...

  3. 基于Schema配置切面

        使用基于Schema的切面定义后,切点.增强类型的注解信息从切面类中剥离出来,原来的切面类也就蜕变为真正意义上的POJO了. 1.一个简单切面的配置 基于Schema配置的切面示例: < ...

  4. python文档自动翻译

    关键方法 提取文档内容 读取TXT文档 txt文档的读取很简单,直接用python自带的open()方法就好,代码如下所示: # 读取TXT文档 def read_txt(path): '''实现TX ...

  5. mybatis05--多条件的查询

    public interface StudentDao { /** * 前台的表单给出的查询条件不能封装成一个对象的时候 * 查询只能是多个参数了! 也就是参数不全是Student中的属性! * 这时 ...

  6. hibernate11--Criteria查询

    public class EmpTest { Session session =null; Transaction transaction=null; @Before public void befo ...

  7. 三、CSS语言

    CSS语言 1.概述:CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示 ...

  8. 第k小整数

    题目描述: 现有n个正整数,n≤10000,要求出这n个正整数中的第k个最小整数(相同大小的整数只计算一次),k≤1000,正整数均小于30000. 输入: 第一行为n和k,第二行开始为n个正整数的值 ...

  9. Laravel开发采坑系列问题

    2017年12月22日17:40:03 不定时更新 版本5.4.X 一下是可能会遇到的坑 1,必须的写路由转发才能访问控制器,当然你可以自动路由访问,但是需要些匹配规则,其实还是转发了 好多人讨论过自 ...

  10. javascript 窗口宽高滚动

    //不加window IE不支持 console.info(window.screenLeft);//IE支持火狐不支持 console.info(window.screenX);//火狐支持,IE不 ...