仿soul 3d 星球

1、结构部分 

<template>

  <div class="tagBall">

    <a class="tag" target="_blank" rel="external nofollow" :style="getStyle(item)" v-for="(item, index) in nameList" :key="index" >{{item.wordName}}</a>

  </div>

</template>

2、逻辑部分 

<script>

export default {

    data() {

        return {

          nameList: [

            {wordName: '太阳能', wordValue: 600}

          ]

        }

    },

  mounted () {

    const tagEle = 'querySelectorAll' in document ? document.querySelectorAll('.tag') : getClass('tag')

    const paper = 'querySelectorAll' in document ? document.querySelector('.tagBall') : getClass('tagBall')[0]

    const RADIUS = 140

    const fallLength = 250

    const tags = []

    let angleX = Math.PI / 250

    let angleY = Math.PI / 250

    const CX = paper.offsetWidth / 2

    const CY = paper.offsetHeight / 2

    const EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft

    const EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop

    function getClass (className) {

      const ele = document.getElementsByTagName('*')

      const classEle = []

      for (let i = 0; i < ele.length; i++) {

        const cn = ele[i].className

        if (cn === className) {

          classEle.push(ele[i])

        }

      }

      console.log(classEle)

      return classEle

    }

    function innit () {

      for (let i = 0; i < tagEle.length; i++) {

        const k = (2 * (i + 1) - 1) / tagEle.length - 1

        const a = Math.acos(k)

        const b = a * Math.sqrt(tagEle.length * Math.PI)

        // var a = Math.random()*2*Math.PI;

        // var b = Math.random()*2*Math.PI;

        const x = RADIUS * Math.sin(a) * Math.cos(b)

        const y = RADIUS * Math.sin(a) * Math.sin(b)

        const z = RADIUS * Math.cos(a)

        // 位置

        const t = new Tag(tagEle[i], x, y, z)

        // 自动生产rgba

        // console.log(11111, t);

        // tagEle[i].style.color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')'

        tags.push(t)

        t.move()

        // this.getColor()

      }

    }

    const forEach = function (callback) {

      for (let i = 0; i < this.length; i++) {

        callback.call(this[i])

      }

    }

    tags.forEach = forEach

    function animate () {

      setInterval(function () {

        rotateX()

        rotateY()

        tags.forEach(function () {

          this.move()

        })

      }, 200)

    }

    if ('addEventListener' in window) {

      paper.addEventListener('mousemove', function (event) {

        const x = event.clientX - EX - CX

        const y = event.clientY - EY - CY

        // angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);

        // angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);

        angleY = x * 0.0001

        angleX = y * 0.0001

      })

    } else {

      paper.attachEvent('onmousemove', function (event) {

        const x = event.clientX - EX - CX

        const y = event.clientY - EY - CY

        angleY = x * 0.0001

        angleX = y * 0.0001

      })

    }

    function rotateX () {

      const cos = Math.cos(angleX)

      const sin = Math.sin(angleX)

      tags.forEach(function () {

        const y1 = this.y * cos - this.z * sin

        const z1 = this.z * cos + this.y * sin

        this.y = y1

        this.z = z1

      })

    }

    function rotateY () {

      const cos = Math.cos(angleY)

      const sin = Math.sin(angleY)

      tags.forEach(function () {

        const x1 = this.x * cos - this.z * sin

        const z1 = this.z * cos + this.x * sin

        this.x = x1

        this.z = z1

      })

    }

    const Tag = function (ele, x, y, z) {

      this.ele = ele

      this.x = x

      this.y = y

      this.z = z

    }

    Tag.prototype = {

      move: function () {

        const scale = fallLength / (fallLength - this.z)

        // console.log(111, scale);

       

        const alpha = (this.z + RADIUS) / (2 * RADIUS)

        // this.ele.style.fontSize = 8 * scale + 'px' // 全局字体

        this.ele.style.opacity = alpha + 0.5 // 透明度

        this.ele.style.filter = 'alpha(opacity = ' + (alpha + 0.5) * 100 + ')'

        this.ele.style.zIndex = parseInt(scale * 100)

        this.ele.style.left = this.x + CX - this.ele.offsetWidth / 2 + 'px'

        this.ele.style.top = this.y + CY - this.ele.offsetHeight / 2 + 'px'

      }

    }

    innit()

    animate()

    this.getStyle()

  },

  methods: {

    getStyle(item) {

      if (item['wordValue'] <= 400) {

        return `color:#FFF1B9; font-size:14px;`

      } else if(item['wordValue'] <= 500) {

        return `color:#40D4FF; font-size:14px;`

      } else if(item['wordValue'] <= 600) {

        return `color:#e8727b; font-size:14px;`

      } else if(item['wordValue'] <= 700) {

        return `color:#C4FCC4; font-size:14px;`

      } else if(item['wordValue'] <= 800) {

        return `color:#8BE5FF; font-size:14px;`

      } else if(item['wordValue'] <= 900) {

        return `color:#A4A4F5; font-size:14px;`

      } else if(item['wordValue'] <= 1000) {

        return `color:#DFFFDE; font-size:20px;`

      }

    }

  }

}




</script>

3、样式部分 

<style lang="scss" scoped>

.tagBall{

    width: 100%;

    height: 250px;

    box-sizing: border-box;

    // overflow: hidden;

    // margin: 10px auto;

    position: relative;

}

.tag{

    display: block;

    position: absolute;

    left: 0px;

    top: 0px;

    color: #000;

    text-decoration: none;

    font-size: 10px;

    font-family: "微软雅黑";

    font-weight: bold;

}

.tag:hover{border:1px solid #666;}

</style>