欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：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，是由多個文字形成的3D效果，如果首次加載網(wǎng)頁出錯的話，請刷新一下頁面，當(dāng)然在使用中不會出現(xiàn)此問題。

復(fù)制代碼 代碼如下:
<!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>

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jQuery頁面加載初始化常用的三種方法

    jQuery頁面加載初始化常用的三種方法

    當(dāng)頁面打開時我們需要執(zhí)行一些操作，下面為大家介紹三種不錯的方法，大家可以參考下
    2014-06-06
  • 使用jquery如何獲取時間

    使用jquery如何獲取時間

    日期函數(shù)在程序開發(fā)中是一個重要的工具,js也提供了Date()函數(shù),如獲取當(dāng)前時間,當(dāng)前年月,已經(jīng)系統(tǒng)時間的毫秒數(shù)。
    2016-10-10
  • jQuery實(shí)用技巧必備（中）

    jQuery實(shí)用技巧必備（中）

    這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開發(fā)，感興趣的小伙伴們可以參考一下
    2015-11-11
  • 一個簡單的jquery的多選下拉框(自寫)

    一個簡單的jquery的多選下拉框(自寫)

    想在網(wǎng)上找一個插件用用，可是，網(wǎng)上的插件看起來都比較雜亂，我參考了網(wǎng)上的一些插件，自己用jquery寫了一個多選下拉框
    2014-05-05
  • jquery淡入淡出效果簡單實(shí)例

    jquery淡入淡出效果簡單實(shí)例

    這篇文章主要介紹了jquery淡入淡出效果簡單實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery中fadeIn及fadeOut實(shí)現(xiàn)淡入淡出的相關(guān)技巧,需要的朋友可以參考下
    2016-01-01
  • jquery屬性,遍歷,HTML操作方法詳解

    jquery屬性,遍歷,HTML操作方法詳解

    下面小編就為大家?guī)硪黄猨query屬性,遍歷,HTML操作方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • jQuery 判斷元素整理匯總

    jQuery 判斷元素整理匯總

    本文給大家匯總介紹了jQuery的幾種判斷元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能夠喜歡
    2017-02-02
  • jQuery插件pagewalkthrough實(shí)現(xiàn)引導(dǎo)頁效果

    jQuery插件pagewalkthrough實(shí)現(xiàn)引導(dǎo)頁效果

    這篇文章主要介紹了jQuery插件pagewalkthrough實(shí)現(xiàn)引導(dǎo)頁效果的方法和示例代碼，十分的詳細(xì)和實(shí)用，有需要的小伙伴可以參考下。
    2015-07-07
  • JQuery 選項(xiàng)卡效果(JS與HTML的分離)

    JQuery 選項(xiàng)卡效果(JS與HTML的分離)

    基于JQuery實(shí)現(xiàn)的一個選項(xiàng)卡效果，重點(diǎn)體現(xiàn)在HTML里沒有內(nèi)聯(lián)事件處理程序，而是定義在js文件里，做到行為與結(jié)構(gòu)的分離。
    2010-04-04
  • webuploader模態(tài)框ueditor顯示問題解決方法

    webuploader模態(tài)框ueditor顯示問題解決方法

    這篇文章主要為大家詳細(xì)介紹了webuploader模態(tài)框ueditor顯示問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12

最新評論