jQuery实现3D文字特效的方法

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

jQuery实现3D文字特效的方法

来源：阅读：774 次日期：2015-03-12 14:09:50

温馨提示：小编为您整理了“jQuery实现3D文字特效的方法”,方便广大网友查阅！

这篇文章主要介绍了jQuery实现3D文字特效的方法,通过鼠标与css样式来实现文字特效的技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现3D文字特效的方法。分享给大家供大家参考。具体如下：

这款基于jQuery的3D文字特效演示，不是真正的3D，是由多个文字形成的3D效果，如果首次加载网页出错的话，请刷新一下页面，当然在使用中不会出现此问题。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html>

<head>

<title>jQuery 3D文字</title>

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>

</head>

<body>

<ul>

<li><a href="#">design</a></li>

<li><a href="#">firefox</a></li>

<li><a href="#">flash</a></li>

<li><a href="#">Devirtuoso</a></li>

<li><a href="#">jquery</a></li>

<li><a href="#">usability</a></li>

<li><a href="#">xhtml</a></li>

</ul>

</div>

$(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程序设计有所帮助。

更多信息请查看IT技术专栏

上一篇：jQuery实现当前页面标签高亮显示的方法

下一篇：jQuery实现当前页面标签高亮显示的方法

手机网站地址：jQuery实现3D文字特效的方法

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！