js实现鼠标跟随文字三维球形云标签效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现鼠标跟随文字三维球形云标签效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{background:#24313d; padding:0;}
        #tagsList {position:relative; width:600px; height:600px; margin: -50px auto; background:#24313d;}
        #tagsList a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 3px 6px; }
        #tagsList a:hover { color:#FF0000; letter-spacing:2px;}
    </style>



</head>

<body >

        <div id="tagsList">
            <span><a href="https://www.hao123.com/haoserver/kuaidi.htm">快递查询</a></span>
            <span><a href="http://lvyou.hao123.com/huoche">火车票查询</a></span>
            <span><a href="http://flight.qunar.com/?dh=hotk_P0T0M0">机票</a></span>
            <span><a href="https://www.hao123.com/haoserver/showjicc.htm">手机号</a></span>
            <span><a href="https://map.baidu.com/?daddr=%20&dirflag=t">公交查询</a></span>
            <span><a href="http://app.baidu.com/app/enter?appid=101283">身份证</a></span>
            <span><a href="http://www.weather.com.cn/static/html/weather.shtml">天气预报</a></span>
            <span><a href="https://www.hao123.com/ss/fy.htm">在线翻译</a></span>
            <span><a href="https://www.hao123.com/haoserver/jiaotongcx.htm">交通违章</a></span>
            <span><a href="http://www.ip138.com/">IP地址</a></span>
            <span><a href="http://365rili.duapp.com/">万年历</a></span>
            <span><a href="http://www.51jiemeng.com/">周公解梦</a></span>
            <span><a href="https://web2.qq.com/">网页QQ</a></span>
            <span><a href="http://shurufa.baidu.com/">百度输入法</a></span>
            <span><a href="http://ttplayer.qianqian.com/down.html">千千静听</a></span>
            <span><a href="https://www.hao123.com/wow.htm">魔兽世界</a></span>
            <span><a href="http://xyq.163.com/">梦幻西游</a></span>
            <span><a href="http://xyx.hao123.com/game/game_0_4.html">洛克王国</a></span>
            <span><a href="http://dnf.qq.com/">DNF</a></span>
            <span><a href="http://dota.uuu9.com/">DOTA</a></span>
            <span><a href="http://cf.qq.com/">CF</a></span>
            <span><a href="http://djyx.hao123.com/">单机游戏</a></span>
            <span><a href="http://xyx.hao123.com/">小游戏</a></span>
            <span><a href="http://speed.qq.com/">QQ飞车</a></span>
            <span><a href="http://xyx.hao123.com/pic_0_0_1_21_0.html">植物大战僵尸</a></span>
            <span><a href="http://xyx.hao123.com/pic_0_0_1_32_0.html">连连看</a></span>
            <span><a href="http://xyx.hao123.com/pic_0_0_1_91_0.html">斗地主</a></span>
            <span><a href="http://xyx.hao123.com/pic_0_0_1_75_0.html">合金弹头</a></span>
            <span><a href="https://www.hao123.com/radish">保卫萝卜</a></span>
            <span><a href="http://1314.qq.com/">玫瑰小镇</a></span>
        </div>

 


    <script >
        ;(function () {
        
          var radius = 120;
          var dtr = Math.PI / 180;
          var d = 300;
          var mcList = [];
          var active = false;
          var lasta = 1;
          var lastb = 1;
          var distr = true;
          var tspeed = 10;
          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('tagsList');
        
            aA = oDiv.getElementsByTagName('a');
        
            for (i = 0; i < aA.length; i++)
            {
              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);
 .........完整代码请登录后点击上方下载按钮下载查看