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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
Javascript模块化编程详解
Dec 01 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
2014年两会学习心得范例
2014/03/17 职场文书
家长通知书家长评语
2014/04/17 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
幼儿园教师求职信
2015/03/20 职场文书
一个都不能少观后感
2015/06/04 职场文书
军训新闻稿范文
2015/07/17 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang