• jQuery 3D文字特效(备用)


    源码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery 3D文字</title>
    <style type="text/css">
    body{
        font-family: Arial, "MS Trebuchet", sans-serif;
        background-color: #111;
    }
    #list{
        margin:0 auto;
        height:600px;
        600px;
        overflow:hidden;
        position:relative;
        background-color: #000;
    }#list ul,#list li{
        list-style:none;
        margin:0;
        padding:0;
    }
    #list a{
        position:absolute;
        text-decoration: none;
        color:#666;
    }
    #list a:hover{
        color:#ccc;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="list">
        <ul>
                    <li><a href="http://sjolzy.cn/Php.html">PhP</a></li>
                    <li><a href="http://sjolzy.cn/jQuery.html">jQuery</a></li>
                    <li><a href="http://sjolzy.cn/Magento.html">Magento</a></li>
                    <li><a href="http://sjolzy.cn/MySql_.html">MySql</a></li>
                    <li><a href="http://sjolzy.cn/Js.html">Js</a></li>
                    <li><a href="http://sjolzy.cn/HTML.html">HTML</a></li>
                    <li><a href="http://sjolzy.cn/CSS.html">CSS</a></li>
                    <li><a href="http://sjolzy.cn/Ajax.html">Ajax</a></li>
                    <li><a href="http://sjolzy.cn/ThinkPHP.html">ThinkPHP</a></li>
                    <li><a href="http://sjolzy.cn/Apache.html">Apache</a></li>
                    <li><a href="http://sjolzy.cn/Linux.html">Linux</a></li>
                    <li><a href="http://sjolzy.cn/Python.html">Python</a></li>
                    <li><a href="http://sjolzy.cn/Category.html">web</a></li>
                    <li><a href="http://sjolzy.cn/Category.html">xhtml</a></li>
               
                </ul>
            </div>
    <script type="text/javascript">
    $(document).ready(function(){
        var element = $('#list a');;
        var offset = 0;
        var stepping = 0.03;
        var list = $('#list');
        var $list = $(list)
        $list.mousemove(function(e){
            var topOfList = $list.eq(0).offset().top
            var listHeight = $list.height()
            stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
        });
       
        for (var i = element.length - 1; i >= 0; i--){
            element[i].elemAngle = i * Math.PI * 2 / element.length;
        }
        setInterval(render, 20);
    function render(){
            for (var i = element.length - 1; i >= 0; i--){
                var angle = element[i].elemAngle + offset;
                x = 120 + Math.sin(angle) * 30;
                y = 45 + Math.cos(angle) * 40;
                size = Math.round(40 - Math.sin(angle) * 40);
                var elementCenter = $(element[i]).width() / 2;
                var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
                $(element[i]).css("fontSize", size + "pt");
                $(element[i]).css("opacity",size/100);
                $(element[i]).css("zIndex" ,size);
                $(element[i]).css("left" ,leftValue);
                $(element[i]).css("top", y + "%");
            }
            offset += stepping;
        }
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    MFC中添加ToolTip提示框
    神经网络算法程序
    DOS命令大全(经典收藏)
    axure团队合作开发原型图
    POJ 3233 Matrix Power Series(矩阵高速功率+二分法)
    了解你的家公家IP
    HDOJ 3518 Boring counting
    模板方法模式的房间改造-组合查询
    6最好的之一 HTML5/CSS3 演示(PPT)框架
    试想一下,在代码学习Swift!
  • 原文地址:https://www.cnblogs.com/see7di/p/2239785.html
Copyright © 2020-2023  润新知