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实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
js验证账户名是否重复
May 26 Javascript
Vue实现计算器计算效果
Aug 17 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产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
jquery 插件开发方法小结
2009/10/23 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js表头排序实现方法
2015/01/16 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
中专生自我鉴定
2013/12/17 职场文书
学校安全工作制度
2014/01/19 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
广播体操比赛主持词
2015/06/29 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL