前端开发分享一款超酷的3D云标签JS特效

前端开发和后台开发需要会什么
前端开发招聘是什么
软件前端开发是做什么的

html 代码片段

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>分享一款超酷的3D云标签js特效</title>
        <style type=”text/css”>
            body {
                background: #24313d;
            }
            #tagsList {
                position: relative;
                width: 450px;
                height: 450px;
                margin: 150px auto 0;
            }
            #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>
        <script>
            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)
                    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>
    </head>
    <body>
        <div id=”tagsList”>
            <a href=”#/Article.aspx?kid=1″ title=”星级评分”>星级评分</a>
            <a href=”#/Article.aspx?kid=2″ title=”层特效”>层特效</a>
            <a href=”#/Article.aspx?kid=3″ title=”关键字”>关键字</a>
            <a href=”#/Article.aspx?kid=4″ title=”拖拽”>拖拽</a>
            <a href=”#/Article.aspx?kid=5″ title=”分页插件”>分页插件</a>
            <a href=”#/Article.aspx?kid=6″ title=”时间插件”>时间插件</a>
            <a href=”#/Article.aspx?kid=7″ title=”弹出层”>弹出层</a>
            <a href=”#/Article.aspx?kid=8″ title=”数据统计”>数据统计</a>
            <a href=”#/Article.aspx?kid=9″ title=”HTML5″>HTML5</a>
            <a href=”#/Article.aspx?kid=10″ title=”置顶特效”>置顶特效</a>
            <a href=”#/Article.aspx?kid=11″ title=”选项卡”>选项卡</a>
            <a href=”#/Article.aspx?kid=12″ title=”导航菜单”>导航菜单</a>
            <a href=”#/Article.aspx?kid=13″ title=”原创”>原创</a>
            <a href=”#/Article.aspx?kid=14″ title=”动画插件”>动画插件</a>
            <a href=”#/Article.aspx?kid=15″ title=”实用特效”>实用特效</a>
            <a href=”#/Article.aspx?kid=16″ title=”table插件”>table插件</a>
            <a href=”#/Article.aspx?kid=17″ title=”文字特效”>文字特效</a>
            <a href=”#/Article.aspx?kid=18″ title=”图片特效”>图片特效</a>
            <a href=”#/Article.aspx?kid=19″ title=”在线客服”>在线客服</a>
            <a href=”#/Article.aspx?kid=20″ title=”瀑布流”>瀑布流</a>
            <a href=”#/Article.aspx?kid=21″ title=”网友蘑菇”>网友蘑菇</a>
        </div>
    </body>
</html>
前端开发会遇到什么坑
前端开发基础班学什么区别
web前端开发做什么工作吗
» 本文来自:前端开发者 » 《前端开发分享一款超酷的3D云标签JS特效》
» 本文链接地址:https://www.rokub.com/7415.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!