<!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. window alias给cmd命令起别名

    场景: Linux的alias命令是个非常实用的工具,任何命令通过alias可以精简到很短,比如:alias l='ls -l' Windows也有alias类似的命令,就是:doskey,开启方法也 ...

  2. jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）

    闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...

  3. Scala 中方法扩展实践

    前言 这个名字不知道取得是否合适,简单来说要干的事情就是给某个类型添加一些扩展方法,此场景在各种语言中都会用到,比如 C# 语言,如果我们使用一个别人写好的类库,而又想给某个类库添加一些自己封装的方法 ...

  4. 前端页面展示MySQL数据并实现前后端互动

    前端页面使用H-ui框架  后端使用flask框架  数据库使用mysql  连接数据库通过pymysql实现 前端代码如下 <html lang="en"> < ...

  5. poj1321_kuagnbin带你飞专题一

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43565   Accepted: 21163 Descriptio ...

  6. 浏览器打开exe文件

    <win-r> regedit 打开注册表,然后自定义协议 自定义协议注册表.reg 打开后导入 Windows Registry Editor Version 5.00 [HKEY_CL ...

  7. 松散的css

    <style> <p>hello world</p> {} p { color: red; } {} <em style="padding: 4px ...

  8. 主席树 || 可持久化线段树 || BZOJ 3653: 谈笑风生 || Luogu P3899 [湖南集训]谈笑风生

    题面:P3899 [湖南集训]谈笑风生 题解: 我很喜欢这道题. 因为A是给定的,所以实质是求二元组的个数.我们以A(即给定的P)作为基点寻找答案,那么情况分两类.一种是B为A的父亲,另一种是A为B的 ...

  9. Compile pam with pam_cracklib.so

    pam_cracklib.so is dependent on libcrack.so. Configure command will search libcrack.so. If it didn't ...

  10. Python的命令模式和交互模式

    Python的命令行模式和交互模式 请注意区分命令行模式和Python交互模式. 在命令行模式下,可以执行python进入Python交互式环境,也可以执行python first.py运行一个.py ...