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 创建对象(常见的几种方法)
Nov 03 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
JavaScript如何判断input数据类型
Feb 06 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 防注入函数(格式化数据)
2011/08/08 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
详解PyTorch批训练及优化器比较
2018/04/28 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
幼儿运动会邀请函
2014/01/17 职场文书
运动会广播稿50字
2014/01/26 职场文书
进步之星获奖感言
2014/02/22 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
机关党员公开承诺书
2014/08/30 职场文书
iPhone13再次曝光
2021/04/15 数码科技
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏