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 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
vue实现循环滚动列表
Jun 30 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
深入浅析python继承问题
2016/05/29 Python
Python数据结构之翻转链表
2017/02/25 Python
详解Django中间件执行顺序
2018/07/16 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python numpy 按行归一化的实例
2019/01/21 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python递归函数特点及原理解析
2020/03/04 Python
python实现坦克大战
2020/04/24 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
总裁办公室主任职责
2014/01/02 职场文书
小学节能减排倡议书
2014/05/15 职场文书
公务员考察材料范文
2014/12/23 职场文书