前端开发js导航demo库

前端开发怎么在手机上测试工具
浪潮前端开发怎么样
51前端开发怎么样

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”gb2312″ />
        <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>
    </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>
    <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>
</html>
前端开发怎么样
前端开发seo怎么优化
怎么看待web前端开发
» 本文来自:前端开发者 » 《前端开发js导航demo库》
» 本文链接地址:https://www.rokub.com/7952.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!