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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php数字游戏 计算24算法
2012/06/10 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
javascript中的location用法简单介绍
2007/03/07 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JavaScript中的this机制
2016/01/30 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
Vue组件化开发思考
2018/02/02 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
解决uWSGI的编码问题详解
2017/03/24 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
基于python实现学生信息管理系统
2019/11/22 Python
python实现与redis交互操作详解
2020/04/21 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
装修致歉信
2014/01/15 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
旗帜观后感
2015/06/08 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
mysql中关键词exists的用法实例详解
2022/06/10 MySQL