jQuery实现3D文字特效的方法
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍用css3实现伪3D的文字效果相关面试题，主要包含被问及用css3实现伪3D的文字效果时的应答技巧和注意事项，需要的朋友参考一下 使用text-shadow效果:
-
本文向大家介绍jQuery晃动层特效实现方法，包括了jQuery晃动层特效实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery晃动层特效实现方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍jQuery+CSS3文字跑马灯特效的简单实现，包括了jQuery+CSS3文字跑马灯特效的简单实现的使用技巧和注意事项，需要的朋友参考一下 jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果，文字在上面移动时，就像是文字投影到墙壁上，在转角出会改变运动方向。 效果图如下： 完整HTML代码如下： 以上就是小编为大家带来的jQuery+CSS3文字跑马灯特效的
-
本文向大家介绍jQuery实现弹幕特效，包括了jQuery实现弹幕特效的使用技巧和注意事项，需要的朋友参考一下 案例简介 jQuery实现弹幕效果，代码如下。 案例目录 HTML部分 CSS部分 效果展示 以上就是jQuery实现弹幕效果的代码，希望对您有帮助！ 源码下载：jQuery弹幕 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery文字轮播特效，包括了jQuery文字轮播特效的使用技巧和注意事项，需要的朋友参考一下 闲谈：离开学校那座象牙塔已经也有大半年的事件了，生活中不再充满了茫然只有忙碌。连续加班加点大半个月，做的活动项目终于算是告一段落了，而今天也将是考验其真正价值的时候，现在将这次开发中遇到的问题做一下总结。 项目背景： 这次的项目主要是做一次全国酒店人气排名的营销活动，主要是基于在微信中传
-
本文向大家介绍three.js如何实现3D动态文字效果，包括了three.js如何实现3D动态文字效果的使用技巧和注意事项，需要的朋友参考一下 前言 大家好，这里是 CSS 魔法使——alphardex。 之前在逛国外网站的时候，发现有些网站的文字是刻在3D图形上的，并且能在图形上运动，视觉效果相当不错，于是笔者就也想用three.js来尝试复现出这种效果 上图只是所有效果的其中之一，接下来让我们