<!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. eclipse.ini 修改默认编码为 UTF-8

    eclipse.ini 修改默认编码为 UTF-8 打开您的eclipse安装目录,找到eclipse.ini文件 打开eclipse.ini文件,在最下面加入一行代码:-Dfile.encoding ...

  2. 【腾讯云的1001种玩法】几种在腾讯云建立WordPress的方法（Linux）（二）

    版权声明:本文由张宁原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/126547001488207964 来源:腾云阁 ht ...

  3. Spring 对事务管理的支持

    1.Spring对事务管理的支持 Spring为事务管理提供了一致的编程模板,在高层次建立了统一的事务抽象.也就是说,不管选择Spring JDBC.Hibernate .JPA 还是iBatis,S ...

  4. 全局解释器锁GIL

    我们使用高并发,一次是创建1万个线程去修改一个数并打印结果看现象: from threading import Thread import os def func(args): global n n ...

  5. python 接口自动化测试（五）其他-认证&代理&超时配置

    有了前面几节的介绍,基本的接口测试是可以满足了.本节一些其它的高级技巧: 一.认证 1.基本认证: # -*- coding:utf-8 -*- import requests url = " ...

  6. ubantu中怎样安装VMware Tools

    点击虚拟机选择安装VMware tools tar zxvf VMwareTools-9.6.0-1294478.tar.gz -C /root/(安装到的目录)cd /root/cd vmware- ...

  7. java 三大框架 struct2部分 实现增删该查操作

    1.三层架构    表现层:接收和处理请求.        MVC模型:它是一个表现层模型.    业务层:处理程序业务需求.    持久层:对数据库操作的.2.MVC模型    M:Model   ...

  8. 四则运算第三次 PSP

     

  9. 安装ipa文件

    https://www.jianshu.com/p/419a35f9533a 1.通过iTunes直接拖动到左侧的侧边栏(未尝试) 2.通过Xcode点击进入Devices管理,添加ipa文件进行安装 ...

  10. Nginx+Tomcat整合的安装与配置(win.linux)

    //原帖 http://zyjustin9.iteye.com/blog/2017394 上面是windows系统,linux直接下拉到分割线. 相信很多人都听过nginx,这个小巧的东西慢慢地在吞食 ...