快捷導(dǎo)航

jQuery實(shí)現(xiàn)3D文字特效的方法

更新時(shí)間：2015年03月10日 11:34:17 作者：hcqenjoy

這篇文章主要介紹了jQuery實(shí)現(xiàn)3D文字特效的方法,通過鼠標(biāo)與css樣式來實(shí)現(xiàn)文字特效的技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)3D文字特效的方法。分享給大家供大家參考。具體如下：

這款基于jQuery的3D文字特效演示，不是真正的3D，是由多個(gè)文字形成的3D效果，如果首次加載網(wǎng)頁出錯(cuò)的話，請(qǐng)刷新一下頁面，當(dāng)然在使用中不會(huì)出現(xiàn)此問題。

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

    width: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="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>

</head>

<body>

<div id="list">

    <ul>

 <li><a href="#">ajax</a></li>

 <li><a href="#">css</a></li>

 <li><a href="#">design</a></li>

 <li><a href="#">firefox</a></li>

 <li><a href="#">flash</a></li>

 <li><a href="#">html</a></li>

 <li><a href="#">Devirtuoso</a></li>

 <li><a href="#">jquery</a></li>

 <li><a href="#">PHP</a></li>

 <li><a href="#">SEO</a></li>

 <li><a href="#">usability</a></li>

 <li><a href="#">www</a></li>

 <li><a href="#">web</a></li>

 <li><a href="#">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>