jQuery实现3D文字特效的方法


Posted in Javascript onMarch 10, 2015

本文实例讲述了jQuery实现3D文字特效的方法。分享给大家供大家参考。具体如下:

这款基于jQuery的3D文字特效演示,不是真正的3D,是由多个文字形成的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;

    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程序设计有所帮助。

Javascript 相关文章推荐
js中的string.format函数代码
Aug 11 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
Javascript之Math对象详解
Jun 07 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 #Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 #Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 #Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 #Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 #Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 #Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 #Javascript
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
vue+iview分页组件的封装
2020/11/17 Vue.js
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Python 除法小技巧
2008/09/06 Python
Python算法之栈(stack)的实现
2014/08/18 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python 序列的方法总结
2016/10/18 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python API自动化框架总结
2019/11/12 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
大学校务公开实施方案
2014/03/31 职场文书
2014年营销工作总结
2014/11/22 职场文书
创业计划书之甜品店
2019/09/18 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书