js代码改成vue组件

自渡96 2020-03-25 01:25:37

找了个3d标签云的代码，想给它改成Vue组件，表示自己太菜不太会改，烦请大佬们帮忙改下



<!DOCTYPE html>

<html lang="zh-CN">

    

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>#rotate a{position:absolute;top:0px;left:0px;color:#00bdfe;font-weight:bold;padding:3px 6px;font-size:14px;z-index: 0 !important;} #rotate a:hover{border:1px solid #eee; background:#00bdfe; color: white; border-radius:5px; text-decoration:none;}</style></head>

    

    <body>

        <div id="rotate" style="height: 480px;">

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">车牌号测吉凶</a>

            <a href="/use/287" target="_blank">周边上车点推荐</a>

            <a href="/use/7" target="_blank">火车票识别</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">全国火车票查询</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">猜一猜</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">中文分词</a>

            <a href="/use/41" target="_blank">在线活体检测</a>

            <a href="/use/236" target="_blank">获取外网IP信息</a>

            <a href="/use/188" target="_blank">药品查询</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">影讯查询</a>

            <a href="/use/72" target="_blank">历史上的今天</a>

            <a href="/use/71" target="_blank">汇率</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">微信小程序查询</a>

            <a href="/use/269" target="_blank">输入提示</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">经纬度转换地址</a>

            <a href="/use/231" target="_blank">微信公众号查询</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">同义词</a>

            <a href="/use/245" target="_blank">识别身份证文字</a>

            <a href="/use/207" target="_blank">辞海</a>

            <a href="/use/261" target="_blank">驾车路径规划</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">网游排行榜</a>

            <a href="/use/44" target="_blank">人体关键点识别</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">全国房产信息</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">三合一收款码</a>

            <a href="/use/187" target="_blank">疾病信息</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">姓名打分</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">脑筋急转弯</a>

            <a href="/use/191" target="_blank">药房药店</a>

            <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">全球IP地址查询</a>

            <a href="/use/241" target="_blank">音乐搜索</a></div>

        <script>var radius = 150;

            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('rotate');



                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);



                    mouseX /= 5;

                    mouseY /= 5;

                };



                setInterval(update, 30);

            };



            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);

            }</script>

    </body>



</html>

...全文

745 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

jio可 2020-03-25

打赏
举报

要获取dom当前style计算新的style不获取dom怎么可能，这个本来就是操作dom css来实现的插件，就算改成:style={}的方式还是一样的操作了dom

自渡96 2020-03-25

打赏
举报

引用 3 楼三岁打酱油的回复:

你要循环生成a标签，然后给每个标签设置一个ref？那你自己写个数组，多加一个style的属性动态绑定到dom上

不是没想过，总觉得这么做不太好，所以来论坛问问大佬们该怎么处理

jio可 2020-03-25

打赏
举报

你要循环生成a标签，然后给每个标签设置一个ref？那你自己写个数组，多加一个style的属性动态绑定到dom上

自渡96 2020-03-25

打赏
举报

引用 1 楼三岁打酱油的回复:

自己写个vue文件copy #app里面内容放到template里面，js除了实力vue其他都复制

如果是这么写我会，主要是这段


this.oDiv = document.getElementById('rotate');
this.aA = this.oDiv.getElementsByTagName('a');

不想直接操作dom元素,document.getElementById('rotate');可以用ref注册然后Vue获取到，主要了下面的this.oDiv.getElementsByTagName('a');这个我不知道用Vue该怎么处理

jio可 2020-03-25

打赏
举报


<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #rotate a {
      position: absolute;
      top: 0px;
      left: 0px;
      color: #00bdfe;
      font-weight: bold;
      padding: 3px 6px;
      font-size: 14px;
      z-index: 0 !important;
    }

    #rotate a:hover {
      border: 1px solid #eee;
      background: #00bdfe;
      color: white;
      border-radius: 5px;
      text-decoration: none;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div id="rotate" style="height: 480px;">
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">车牌号测吉凶</a>
      <a href="/use/287" target="_blank">周边上车点推荐</a>
      <a href="/use/7" target="_blank">火车票识别</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">全国火车票查询</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">猜一猜</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">中文分词</a>
      <a href="/use/41" target="_blank">在线活体检测</a>
      <a href="/use/236" target="_blank">获取外网IP信息</a>
      <a href="/use/188" target="_blank">药品查询</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">影讯查询</a>
      <a href="/use/72" target="_blank">历史上的今天</a>
      <a href="/use/71" target="_blank">汇率</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">微信小程序查询</a>
      <a href="/use/269" target="_blank">输入提示</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">经纬度转换地址</a>
      <a href="/use/231" target="_blank">微信公众号查询</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">同义词</a>
      <a href="/use/245" target="_blank">识别身份证文字</a>
      <a href="/use/207" target="_blank">辞海</a>
      <a href="/use/261" target="_blank">驾车路径规划</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">网游排行榜</a>
      <a href="/use/44" target="_blank">人体关键点识别</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">全国房产信息</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">三合一收款码</a>
      <a href="/use/187" target="_blank">疾病信息</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">姓名打分</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">脑筋急转弯</a>
      <a href="/use/191" target="_blank">药房药店</a>
      <a href="javascript:layer.msg("暂未接入该接口",{icon: 2,shift: 6});" target="_blank">全球IP地址查询</a>
      <a href="/use/241" target="_blank">音乐搜索</a>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          radius: 150,
          dtr: Math.PI / 180,
          d: 300,
          mcList: [],
          active: false,
          lasta: 1,
          lastb: 1,
          distr: true,
          tspeed: 2,
          size: 250,
          mouseX: 0,
          mouseY: 0,
          howElliptical: 1,
          aA: null,
          oDiv: null,
        }
      },
      methods: {
        update() {
          var a;
          var b;
          if (this.active) {
            a = (-Math.min(Math.max(-this.mouseY, -this.size), this.size) / this.radius) * this.tspeed;
            b = (Math.min(Math.max(-this.mouseX, -this.size), this.size) / this.radius) * this.tspeed;
          } else {
            a = this.lasta * 0.98;
            b = this.lastb * 0.98;
          }

          this.lasta = a;
          this.lastb = b;

          if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
            return;
          }

          var c = 0;
          this.sineCosine(a, b, c);
          for (var j = 0; j < this.mcList.length; j++) {
            var rx1 = this.mcList[j].cx;
            var ry1 = this.mcList[j].cy * this.ca + this.mcList[j].cz * (-this.sa);
            var rz1 = this.mcList[j].cy * this.sa + this.mcList[j].cz * this.ca;

            var rx2 = rx1 * this.cb + rz1 * this.sb;
            var ry2 = ry1;
            var rz2 = rx1 * (-this.sb) + rz1 * this.cb;

            var rx3 = rx2 * this.cc + ry2 * (-this.sc);
            var ry3 = rx2 * this.sc + ry2 * this.cc;
            var rz3 = rz2;

            this.mcList[j].cx = rx3;
            this.mcList[j].cy = ry3;
            this.mcList[j].cz = rz3;

            per = this.d / (this.d + rz3);

            this.mcList[j].x = (this.howElliptical * rx3 * per) - (this.howElliptical * 2);
            this.mcList[j].y = ry3 * per;
            this.mcList[j].scale = per;
            this.mcList[j].alpha = per;

            this.mcList[j].alpha = (this.mcList[j].alpha - 0.6) * (10 / 6);
          }

          this.doPosition();
          this.depthSort();
        },

        depthSort() {
          var i = 0;
          var aTmp = [];

          for (i = 0; i < this.aA.length; i++) {
            aTmp.push(this.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;
          }
        },

        positionAll() {
          var phi = 0;
          var theta = 0;
          var max = this.mcList.length;
          var i = 0;

          var aTmp = [];
          var oFragment = document.createDocumentFragment();

          //随机排序
          for (i = 0; i < this.aA.length; i++) {
            aTmp.push(this.aA[i]);
          }

          aTmp.sort(function () {
            return Math.random() < 0.5 ? 1 : -1;
          });

          for (i = 0; i < aTmp.length; i++) {
            oFragment.appendChild(aTmp[i]);
          }

          this.oDiv.appendChild(oFragment);

          for (var i = 1; i < max + 1; i++) {
            if (this.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);
            }
            //坐标装换
            this.mcList[i - 1].cx = this.radius * Math.cos(theta) * Math.sin(phi);
            this.mcList[i - 1].cy = this.radius * Math.sin(theta) * Math.sin(phi);
            this.mcList[i - 1].cz = this.radius * Math.cos(phi);

            this.aA[i - 1].style.left = this.mcList[i - 1].cx + this.oDiv.offsetWidth / 2 - this.mcList[i - 1].offsetWidth / 2 + 'px';
            this.aA[i - 1].style.top = this.mcList[i - 1].cy + this.oDiv.offsetHeight / 2 - this.mcList[i - 1].offsetHeight / 2 + 'px';
          }
        },

        doPosition() {
          var l = this.oDiv.offsetWidth / 2;
          var t = this.oDiv.offsetHeight / 2;
          for (var i = 0; i < this.mcList.length; i++) {
            this.aA[i].style.left = this.mcList[i].cx + l - this.mcList[i].offsetWidth / 2 + 'px';
            this.aA[i].style.top = this.mcList[i].cy + t - this.mcList[i].offsetHeight / 2 + 'px';

            this.aA[i].style.fontSize = Math.ceil(12 * this.mcList[i].scale / 2) + 8 + 'px';

            this.aA[i].style.filter = "alpha(opacity=" + 100 * this.mcList[i].alpha + ")";
            this.aA[i].style.opacity = this.mcList[i].alpha;
          }
        },

        sineCosine(a, b, c) {
          this.sa = Math.sin(a * this.dtr);
          this.ca = Math.cos(a * this.dtr);
          this.sb = Math.sin(b * this.dtr);
          this.cb = Math.cos(b * this.dtr);
          this.sc = Math.sin(c * this.dtr);
          this.cc = Math.cos(c * this.dtr);
        }
      },
      mounted() {
        var oTag = null;
        this.oDiv = document.getElementById('rotate');
        this.aA = this.oDiv.getElementsByTagName('a');
        for (var i = 0; i < this.aA.length; i++) {
          oTag = {};
          oTag.offsetWidth = this.aA[i].offsetWidth;
          oTag.offsetHeight = this.aA[i].offsetHeight;
          this.mcList.push(oTag);
        }
        this.sineCosine(0, 0, 0);
        this.positionAll();
        this.oDiv.onmouseover = ()=> {
          this.active = true;
        };
        this.oDiv.onmouseout =  ()=> {
          this.active = false;
        };
        this.oDiv.onmousemove = (ev) => {
          var oEvent = window.event || ev;
          this.mouseX = oEvent.clientX - (this.oDiv.offsetLeft + this.oDiv.offsetWidth / 2);
          this.mouseY = oEvent.clientY - (this.oDiv.offsetTop + this.oDiv.offsetHeight / 2);
          this.mouseX /= 5;
          this.mouseY /= 5;
        };
        setInterval(() => {
          this.update()
        }, 30);
      },
    })
  </script>
</body>

</html>

自己写个vue文件copy #app里面内容放到template里面，js除了实力vue其他都复制