1.   <%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" pageEncoding="UTF-8" %>
  2.   <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.     <base target="_blank">
  7.         <title>tags</title>
  8.     </head>
  9.     <body>
  10.         <div id="tagsList" style="height: 400px; width:800px; border:1px solid #ccc;padding:10px;">
  11.         <span><a href="http://www.111cn.net">快递查询</a></span>
  12.         <span><a href="http://www.111cn.net">火车票查询</a></span>
  13.         <span><a href="http://www.111cn.net">机票</a></span>
  14.         <span><a href="http://www.111cn.net">手机号</a></span>
  15.         <span><a href="http://www.111cn.net">公交查询</a></span>
  16.         <span><a href="http://www.111cn.net">身份证</a></span>
  17.         <span><a href="http://www.111cn.net">天气预报</a></span>
  18.         <span><a href="http://www.111cn.net">在线翻译</a></span>
  19.         <span><a href="http://www.111cn.net">交通违章</a></span>
  20.         <span><a href="http://www.111cn.net">IP地址</a></span>
  21.         <span><a href="http://www.111cn.net">万年历</a></span>
  22.         <span><a href="http://www.111cn.net">周公解梦</a></span>
  23.         <span><a href="http://www.111cn.net">网页QQ</a></span>
  24.         <span><a href="http://www.111cn.net">百度输入法</a></span>
  25.         <span><a href="http://www.111cn.net">千千静听</a></span>
  26.         <span><a href="http://www.111cn.net">魔兽世界</a></span>
  27.         <span><a href="http://www.111cn.net">梦幻西游</a></span>
  28.         <span><a href="http://www.111cn.net">洛克王国</a></span>
  29.         <span><a href="http://www.111cn.net">DNF</a></span>
  30.         <span><a href="http://www.111cn.net">DOTA</a></span>
  31.         <span><a href="http://www.111cn.net">CF</a></span>
  32.         <span><a href="http://www.111cn.net">单机游戏</a></span>
  33.         <span><a href="http://www.111cn.net">小游戏</a></span>
  34.         <span><a href="http://www.111cn.net">QQ飞车</a></span>
  35.         <span><a href="http://www.111cn.net">植物大战僵尸</a></span>
  36.         <span><a href="http://www.111cn.net">连连看</a></span>
  37.         <span><a href="http://www.111cn.net">斗地主</a></span>
  38.         <span><a href="http://www.111cn.net">合金弹头</a></span>
  39.         <span><a href="http://www.111cn.net">保卫萝卜</a></span>
  40.         <span><a href="http://www.111cn.net">玫瑰小镇</a></span>
  41.         </div>
  42.  
  43.     </body>
  44. </html>
  45.         <style>body{background:#ffffff; padding:0;}
  46. #tagsList {position:relative; width:600px; height:600px; margin: -50px auto; background:#ffffff;}
  47. #tagsList a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#b27f3f; font-weight:bold; text-decoration:none; padding: 3px 6px; }
  48. #tagsList a:hover { color:#FF0000; letter-spacing:2px;}</style>
  49.                 <script>;(function(){
  50.  
  51. var radius = 120;
  52. var dtr = Math.PI/180;
  53. var d=300;
  54. var mcList = [];
  55. var active = false;
  56. var lasta = 1;
  57. var lastb = 1;
  58. var distr = true;
  59. var tspeed=10;
  60. var size=250;
  61.  
  62. var mouseX=0;
  63. var mouseY=0;
  64.  
  65. var howElliptical=1;
  66.  
  67. var aA=null;
  68. var oDiv=null;
  69.  
  70. window.onload=function ()
  71. {
  72.     var i=0;
  73.     var oTag=null;
  74.  
  75.     oDiv=document.getElementById('tagsList');
  76.  
  77.     aA=oDiv.getElementsByTagName('a');
  78.  
  79.     for(i=0;i<aA.length;i++)
  80.     {
  81.         oTag={};
  82.  
  83.         oTag.offsetWidth=aA[i].offsetWidth;
  84.         oTag.offsetHeight=aA[i].offsetHeight;
  85.  
  86.         mcList.push(oTag);
  87.     }
  88.  
  89.     sineCosine( 0,0,0 );
  90.  
  91.     positionAll();
  92.  
  93.     oDiv.onmouseover=function ()
  94.     {
  95.         active=true;
  96.     };
  97.  
  98.     oDiv.onmouseout=function ()
  99.     {
  100.         active=false;
  101.     };
  102.  
  103.     oDiv.onmousemove=function (ev)
  104.     {
  105.         var oEvent=window.event || ev;
  106.  
  107.         mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
  108.         mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
  109.  
  110.         mouseX/=5;
  111.         mouseY/=5;
  112.     };
  113.  
  114.     setInterval(update, 30);
  115. };
  116.  
  117. function update()
  118. {
  119.     var a;
  120.     var b;
  121.  
  122.     if(active)
  123.     {
  124.         a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
  125.         b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
  126.     }
  127.     else
  128.     {
  129.         a = lasta * 0.98;
  130.         b = lastb * 0.98;
  131.     }
  132.  
  133.     lasta=a;
  134.     lastb=b;
  135.  
  136.     if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
  137.     {
  138.         return;
  139.     }
  140.  
  141.     var c=0;
  142.     sineCosine(a,b,c);
  143.     for(var j=0;j<mcList.length;j++)
  144.     {
  145.         var rx1=mcList[j].cx;
  146.         var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
  147.         var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
  148.  
  149.         var rx2=rx1*cb+rz1*sb;
  150.         var ry2=ry1;
  151.         var rz2=rx1*(-sb)+rz1*cb;
  152.  
  153.         var rx3=rx2*cc+ry2*(-sc);
  154.         var ry3=rx2*sc+ry2*cc;
  155.         var rz3=rz2;
  156.  
  157.         mcList[j].cx=rx3;
  158.         mcList[j].cy=ry3;
  159.         mcList[j].cz=rz3;
  160.  
  161.         per=d/(d+rz3);
  162.  
  163.         mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
  164.         mcList[j].y=ry3*per;
  165.         mcList[j].scale=per;
  166.         mcList[j].alpha=per;
  167.  
  168.         mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
  169.     }
  170.  
  171.     doPosition();
  172.     depthSort();
  173. }
  174.  
  175. function depthSort()
  176. {
  177.     var i=0;
  178.     var aTmp=[];
  179.  
  180.     for(i=0;i<aA.length;i++)
  181.     {
  182.         aTmp.push(aA[i]);
  183.     }
  184.  
  185.     aTmp.sort
  186.     (
  187.         function (vItem1, vItem2)
  188.         {
  189.             if(vItem1.cz>vItem2.cz)
  190.             {
  191.                 return -1;
  192.             }
  193.             else if(vItem1.cz<vItem2.cz)
  194.             {
  195.                 return 1;
  196.             }
  197.             else
  198.             {
  199.                 return 0;
  200.             }
  201.         }
  202.     );
  203.  
  204.     for(i=0;i<aTmp.length;i++)
  205.     {
  206.         aTmp[i].style.zIndex=i;
  207.     }
  208. }
  209.  
  210. function positionAll()
  211. {
  212.     var phi=0;
  213.     var theta=0;
  214.     var max=mcList.length;
  215.     var i=0;
  216.  
  217.     var aTmp=[];
  218.     var oFragment=document.createDocumentFragment();
  219.  
  220.     //随机排序
  221.     for(i=0;i<aA.length;i++)
  222.     {
  223.         aTmp.push(aA[i]);
  224.     }
  225.  
  226.     aTmp.sort
  227.     (
  228.         function ()
  229.         {
  230.             return Math.random()<0.5?1:-1;
  231.         }
  232.     );
  233.  
  234.     for(i=0;i<aTmp.length;i++)
  235.     {
  236.         oFragment.appendChild(aTmp[i]);
  237.     }
  238.  
  239.     oDiv.appendChild(oFragment);
  240.  
  241.     for( var i=1; i<max+1; i++){
  242.         if( distr )
  243.         {
  244.             phi = Math.acos(-1+(2*i-1)/max);
  245.             theta = Math.sqrt(max*Math.PI)*phi;
  246.         }
  247.         else
  248.         {
  249.             phi = Math.random()*(Math.PI);
  250.             theta = Math.random()*(2*Math.PI);
  251.         }
  252.         //坐标变换
  253.         mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
  254.         mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
  255.         mcList[i-1].cz = radius * Math.cos(phi);
  256.  
  257.         aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
  258.         aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
  259.     }
  260. }
  261.  
  262. function doPosition()
  263. {
  264.     var l=oDiv.offsetWidth/2;
  265.     var t=oDiv.offsetHeight/2;
  266.     for(var i=0;i<mcList.length;i++)
  267.     {
  268.         aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
  269.         aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
  270.  
  271.         aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
  272.  
  273.         aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
  274.         aA[i].style.opacity=mcList[i].alpha;
  275.     }
  276. }
  277.  
  278. function sineCosine( a, b, c)
  279. {
  280.     sa = Math.sin(a * dtr);
  281.     ca = Math.cos(a * dtr);
  282.     sb = Math.sin(b * dtr);
  283.     cb = Math.cos(b * dtr);
  284.     sc = Math.sin(c * dtr);
  285.     cc = Math.cos(c * dtr);
  286. }
  287.  
  288. })();
  289. </script></td>
  290. 	  </tr>
  291. 	</table>

效果图：

非常漂亮js动态球型云标签特效代码的更多相关文章

  1. JS实现转动随机数抽奖的特效代码

    JS实现转动随机数抽奖的特效代码 大家都玩过抽奖游戏,或者梦想抽到大奖吧.可是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码例如以下 <!Doct ...

  2. js动态添加和删除标签

    html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...

  3. 为什么JS动态生成的input标签在后台有时候没法获取到

    最近在做一个产品添加的功能,需求有点奇葩,所以在添加的时候免不了要用到动态生成控件,然后我就使用了JS去动态生成一些 checkbox类型的input标签,在以前用asp.net在后台生成的input ...

  4. 用js动态的改变img标签里面的src属性实现图片的循环切换

    JS:根据循环切换的条件可以用 document.getElementById('').src=''设置, 或者jquery方法: $('#id').attr('src','图片名称’): 具体: i ...

  5. js动态新增组合Input标签

    var x = 1; function addlink() { var linkdiv = document.getElementById("add1_0"); if (linkd ...

  6. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  7. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  8. 通过JS动态追加标签，以父评论子评论为例

    以下代码前后端交互以Django模板语法为例 先来以伪代码来示意用法: HTML部分: JS动态插入部分代码: 运行之后我们来浏览器看检查打印的内容: 看插入前后打印结果我们可以得知 $title[0 ...

  9. JS动态添加的标签无法绑定事件解决方案~~~

    今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...

随机推荐

  1. iOS 数组集合操作（交集，并集，差集，子集）

    1.求数组的 交集,并集,差集 NSArray *array1 = @[@"1",@"2",@"3"]; NSArray *array2 = ...

  2. vue.js 源代码学习笔记 ----- core lifecycle

    /* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, ...

  3. c# 字符串验证（邮箱、电话、数字、ip、身份证等）

    using System; using System.Text.RegularExpressions; namespace HuaTong.General.Utility { /// <summ ...

  4. SpringMVC札集(09)——拦截器

    自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onL ...

  5. redis事务浅析

    事务可以简单理解为:把多件事当做一件事情处理,要么一起成功,要么一起失败.在Spring中可以配置一个事务管理器,然后在要进行事务处理的方法上添加@Transactional注解就可以了. 对于red ...

  6. clean-css 安装 使用

    https://github.com/jakubpawlowicz/clean-css-cli https://davidwalsh.name/clean-css

  7. JDiPad项目runtime的使用分析

    首先,项目有点老 但是运行还是没有问题的.其中很多地方到了runtime,同时也看到了 早期的开发人员 基本没用pod 第三方也很少用,除了微信登录,整个项目还没看到集成的第三方SDK.然后慢慢梳理 ...

  8. 根据显示器的分辨率，加载不同CSS样式表

    <link rel="stylesheet" type="text/css" id="css"><script langu ...

  9. lx 与cd 的计算方法

    Candela to lux calculation with distance in meters The illuminance Ev in lux (lx) is equal to the lu ...

  10. >=< 在set和dict中的不同

    两个dict比较的算法是,长度>键>值,由于dict无序,所以比较的时候会自动将键对齐比较,我们不用担心这个. >>> d1 = dict(x=1, y=2) >& ...