Js_实现3D球体旋转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
.tagBall{
width: 800px;
height: 800px;
margin:50px auto;
position: relative;
}
.tag{
display: block;
position: absolute;
left: 0px;
top: 0px;
color: #000;
text-decoration: none;
font-size: 15px;
font-family: "微软雅黑";
font-weight: bold;
}
.tag:hover{border:1px solid #666;}
</style>
<title>3D标签-柯乐义</title>
</head>
<body>
<div class="tagBall">
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">马到成功</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com/a/bjad/9sgmqsee.htm">新年快乐</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com/a/bjad/9sgmqsee.htm">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com/a/bjad/9sgmqsee.htm">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">笑口常开</a>
<a class="tag" target="_blank" href="http://keleyi.com">柯乐义</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">柯乐义</a>
<a class="tag" target="_blank" href="http://keleyi.com">Happy New Year!</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com/a/bjad/9sgmqsee.htm">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">柯乐义</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">好运连连</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">红澄黄绿青蓝紫</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">好运连连</a>
<a class="tag" target="_blank" href="http://keleyi.com">好运连连</a>
<a class="tag" target="_blank" href="http://keleyi.com">某某某</a>
<a class="tag" target="_blank" href="http://keleyi.com">我喜欢你</a>
</div>
<script type="text/javascript">
var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),
paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];
RADIUS = 300,
fallLength = 500,
tags = [],
angleX = Math.PI / 500,
angleY = Math.PI / 500,
CX = paper.offsetWidth / 2,
CY = paper.offsetHeight / 2,
EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft,
EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;
function getClass(className) {
var ele = document.getElementsByTagName("*");
var classEle = [];
for (var i = 0; i < ele.length; i++) {
var cn = ele[i].className;
if (cn === className) {
classEle.push(ele[i]);
}
}
return classEle;
}
function innit() {
for (var i = 0; i < tagEle.length; i++) {
var a, b;
var k = (2 * (i + 1) - 1) / tagEle.length - 1;
var a = Math.acos(k);
var b = a * Math.sqrt(tagEle.length * Math.PI);
// var a = Math.random()*2*Math.PI;
// var b = Math.random()*2*Math.PI;
var x = RADIUS * Math.sin(a) * Math.cos(b);
var y = RADIUS * Math.sin(a) * Math.sin(b);
var z = RADIUS * Math.cos(a);
var t = new tag(tagEle[i], x, y, z);
tagEle[i].style.color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
tags.push(t);
t.move();
}
}
Array.prototype.forEach = function (callback) {
for (var i = 0; i < this.length; i++) {
callback.call(this[i]);
}
}
function animate() {
setInterval(function () {
rotateX();
rotateY();
tags.forEach(function () {
this.move();
})
}, 17)
}
if ("addEventListener" in window) {
paper.addEventListener("mousemove", function (event) {
var x = event.clientX - EX - CX;
var y = event.clientY - EY - CY;
// angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
// angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
angleY = x * 0.0001;
angleX = y * 0.0001;
});
}
else {
paper.attachEvent("onmousemove", function (event) {
var x = event.clientX - EX - CX;
var y = event.clientY - EY - CY;
angleY = x * 0.0001;
angleX = y * 0.0001;
});
}
function rotateX() {
var cos = Math.cos(angleX);
var sin = Math.sin(angleX);
tags.forEach(function () {
var y1 = this.y * cos - this.z * sin;
var z1 = this.z * cos + this.y * sin;
this.y = y1;
this.z = z1;
})
}
function rotateY() {
var cos = Math.cos(angleY);
var sin = Math.sin(angleY);
tags.forEach(function () {
var x1 = this.x * cos - this.z * sin;
var z1 = this.z * cos + this.x * sin;
this.x = x1;
this.z = z1;
})
}
var tag = function (ele, x, y, z) {
this.ele = ele;
this.x = x;
this.y = y;
this.z = z;
}
tag.prototype = {
move: function () {
var scale = fallLength / (fallLength - this.z);
var alpha = (this.z + RADIUS) / (2 * RADIUS);
this.ele.style.fontSize = 15 * scale + "px";
this.ele.style.opacity = alpha + 0.5;
this.ele.style.filter = "alpha(opacity = " + (alpha + 0.5) * 100 + ")";
this.ele.style.zIndex = parseInt(scale * 100);
this.ele.style.left = this.x + CX - this.ele.offsetWidth / 2 + "px";
this.ele.style.top = this.y + CY - this.ele.offsetHeight / 2 + "px";
}
}
innit();
animate();
</script>
</body>
</html>
Js_实现3D球体旋转的更多相关文章
- CSS3实现3D球体旋转动画
html <div class="ball-box"> <div class="ball"> <div class="l ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- Three.js 第一篇：绘制一个静态的3D球体
第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
- css3-实现3D立方体旋转
核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...
- 2d,3d中旋转推导
二维绕原点旋转,其实点为(x,y),旋转角度为黄色标注的角度. 推导过程如下: x' = r cos(al+be); y' = r sin(al+be);x '= rcosalcosbe-rsinal ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- AE模板替换-众多图片沿着球体旋转!与您分享
AE-模板替换<众多图片沿球体旋转>效果的视频 近日,本人又一次做了AE的[图片替换]的模板尝试,本人感觉:预览视频时发现的效果较新颖,也有些气势;就是短了些,我安排了,&q ...
- WPF动态加载3D 放大-旋转-平移
原文:WPF动态加载3D 放大-旋转-平移 WavefrontObjLoader.cs 第二步:ModelVisual3DWithName.cs public class ModelVisual3DW ...
随机推荐
- 万恶的浏览器缓存 Vuex state里面的成员改名后浏览器不会马上更新
今天在用Vuex的时候,在state里面加了个名叫rootUrl的属性 但是怎么都取不到值,重新启动程序,ctrl+f5浏览器刷新都不行,纠结了大半上午,于是用console.log(store.ge ...
- Hash问题----Hash强碰撞
包含内容:hellowword,byeworld文件md5,pdf1,2的sha1值. 等待笔记...
- 阿里八八Alpha阶段Scrum(9/12)
今日进度 叶文滔: 成功完成多级悬浮按钮,并添加与日程输入界面的连接.debug了一些对接产生的问题 黄梅玲: 合并单日项目至多日.获取json数据 王国超: 完成了初步的多日界面,pull至项目.进 ...
- zepto.js不支持scrollTop的解决办法
zepto.js不支持animate({ scrollTop: 100},1000); 可以在移动端使用原生window.scrollTop(x,y);简便
- BZOJ1121:[POI2008]激光发射器SZK(乱搞)
Description 多边形相邻边垂直,边长为整数,边平行坐标轴.要在多边形的点上放一些激光发射器和接收器.满足下列要求: 1发射器和接收器不能放置在同一点: 2发射器发出激光可以沿壁反射,最终到达 ...
- PHP foreach 循环使用"&$val" 地址符“&”
在熟悉项目代码的时候 看到这样的foreach 循环: foreach($data as &$val){ .... } 第一次看到循环里面使用了地址符“&”,我印象中的这个符号 是直接 ...
- Python2.7-bz2
bz2模块,提供 bz2 压缩的接口,一般使用 BZ2File 类来完成操作,操作的文件是后缀为“.bz2”的文件 1.模块方法 bz2.compress(data[, compresslevel]) ...
- Ubuntu软件的安装和使用
windows 系统有很多的截图的软件 比如 QQ 浏览器什么的,但是ubuntu 还是很少的截图软件的接下来介绍一下ubuntu 的截图软件 1.键盘上的alt+printscreen 可以全屏幕的 ...
- 学习笔记---gson
1.gson变量定义注解 @SerializedName("char") private String charm;//mongo转化char 2.gson中json文件转化成类 ...
- OpenGL笔记（四） API参考
常见API glActiveTexture 选择活动纹理单元 glAttachShader 将一个着色器对象绑定到一个程序对象 void glAttachShader(GLuint program, ...