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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
js快速排序的实现代码
Dec 08 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
javascript实现简易计算器
2017/02/01 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python如何支持并发方法详解
2020/07/25 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
赔偿协议书范本
2014/04/15 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
课外活动总结
2015/02/04 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Pandas数据类型之category的用法
2021/06/28 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL