JS关键字球状旋转效果的实例代码


Posted in Javascript onNovember 29, 2013

有时上网查资料,看到别人的博客上有关键字旋转的效果,觉得蛮不错的。于是网上搜索了一下它的实现,好吧,自己动手写写。

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码开始 --> 
<div id="div1">
<a >Asp.net webform</a>
<a >Asp.net mvc</a>
<a >EF</a>
<a >Castle</a>
<a >Spring.net</a>
<a >NHibernate</a>
<a >WCF</a>
<a >WPF</a>
<a >AOP</a>
<a >IoC</a>
<a >SQL</a>
<a >Javascript</a>
<a >Jquery</a>
<a >KendoUI</a>
</div>
</body>
</html>

CSS:
 #div1{height:400px;width:450px; position:relative; margin:10px auto;}
 #div1 a{position:absolute;top:0px;left:0px;font-weight:bold;padding:3px 6px; color:black; text-decoration: none;}
 #div1 a:hover{border:1px solid #eee;background:#ccc;border-radius:5px;}

既然是关键字,我觉得给他们加上不同的颜色才够酷。初始化一个数组存放颜色值,然后再随机分配给各个标签。
var colors = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];
         var rand = Math.ceil(Math.random()*6);
         aA[i].style.color=colors[rand];

JS:
var radius = 100;
var dtr = Math.PI/180;
var d=300;
var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=2;
var size=250;
var mouseX=0;
var mouseY=0;
var howElliptical=1;
var aA=null;
var oDiv=null;
window.onload=function ()
{
    var i=0;
    var oTag=null;
    oDiv=document.getElementById('div1');
    aA=oDiv.getElementsByTagName('a');
    for(i=0;i<aA.length;i++)
    {
        var colors = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];
        var rand = Math.ceil(Math.random()*6);
        aA[i].style.color=colors[rand];
        oTag={};
        oTag.offsetWidth=aA[i].offsetWidth;
        oTag.offsetHeight=aA[i].offsetHeight;
        mcList.push(oTag);
    }
    sineCosine( 0,0,0 );
    positionAll();
    oDiv.onmouseover=function ()
    {
        active=true;
    };
    oDiv.onmouseout=function ()
    {
        active=false;
    };
    oDiv.onmousemove=function (ev)
    {
        var oEvent=window.event || ev;
        mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
        mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
        mouseX/=5;
        mouseY/=5;
    };
    setInterval(update, 10);
};
function update()
{
    var a;
    var b;
    if(active)
    {
        a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
        b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
    }
    else
    {
        a = lasta * 0.98;
        b = lastb * 0.98;
    }
    lasta=a;
    lastb=b;
    if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
    {
        return;
    }
    var c=0;
    sineCosine(a,b,c);
    for(var j=0;j<mcList.length;j++)
    {
        var rx1=mcList[j].cx;
        var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
        var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
        var rx2=rx1*cb+rz1*sb;
        var ry2=ry1;
        var rz2=rx1*(-sb)+rz1*cb;
        var rx3=rx2*cc+ry2*(-sc);
        var ry3=rx2*sc+ry2*cc;
        var rz3=rz2;
        mcList[j].cx=rx3;
        mcList[j].cy=ry3;
        mcList[j].cz=rz3;
        per=d/(d+rz3);
        mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
        mcList[j].y=ry3*per;
        mcList[j].scale=per;
        mcList[j].alpha=per;
        mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
    }
    doPosition();
    depthSort();
}
function depthSort()
{
    var i=0;
    var aTmp=[];
    for(i=0;i<aA.length;i++)
    {
        aTmp.push(aA[i]);
    }
    aTmp.sort
    (
        function (vItem1, vItem2)
        {
            if(vItem1.cz>vItem2.cz)
            {
                return -1;
            }
            else if(vItem1.cz<vItem2.cz)
            {
                return 1;
            }
            else
            {
                return 0;
            }
        }
    );
    for(i=0;i<aTmp.length;i++)
    {
        aTmp[i].style.zIndex=i;
    }
}
function positionAll()
{
    var phi=0;
    var theta=0;
    var max=mcList.length;
    var i=0;
    var aTmp=[];
    var oFragment=document.createDocumentFragment();
    //随机排序
    for(i=0;i<aA.length;i++)
    {
        aTmp.push(aA[i]);
    }
    aTmp.sort
    (
        function ()
        {
            return Math.random()<0.5?1:-1;
        }
    );
    for(i=0;i<aTmp.length;i++)
    {
        oFragment.appendChild(aTmp[i]);
    }
    oDiv.appendChild(oFragment);
    for( var i=1; i<max+1; i++){
        if( distr )
        {
            phi = Math.acos(-1+(2*i-1)/max);
            theta = Math.sqrt(max*Math.PI)*phi;
        }
        else
        {
            phi = Math.random()*(Math.PI);
            theta = Math.random()*(2*Math.PI);
        }
        //坐标变换
        mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
        mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
        mcList[i-1].cz = radius * Math.cos(phi);
        aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
        aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
    }
}
function doPosition()
{
    var l=oDiv.offsetWidth/2;
    var t=oDiv.offsetHeight/2;
    for(var i=0;i<mcList.length;i++)
    {
        aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
        aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
        aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
        aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
        aA[i].style.opacity=mcList[i].alpha;
    }
}
function sineCosine( a, b, c)
{
    sa = Math.sin(a * dtr);
    ca = Math.cos(a * dtr);
    sb = Math.sin(b * dtr);
    cb = Math.cos(b * dtr);
    sc = Math.sin(c * dtr);
    cc = Math.cos(c * dtr);
}

最后看下效果:

JS关键字球状旋转效果的实例代码

Javascript 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
javascript基本类型详解
Nov 28 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
JS Loading功能的简单实现
Nov 29 #Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 #Javascript
浅析JavaScript中的类型和对象
Nov 29 #Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 #Javascript
转换字符串为json对象的方法详解
Nov 29 #Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 #Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 #Javascript
You might like
php print EOF实现方法
2009/05/21 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
js传值 判断
2006/10/26 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
js控制frameSet示例
2013/09/10 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
JS功能代码集锦
2016/05/04 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
电厂职工自我鉴定
2014/02/20 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
Python创建SQL数据库流程逐步讲解
2022/09/23 Python