This article is an example of how jquery implements 3D text effects. Share to everyone for your reference. Specifically as follows:
This is based on jquery 3D text effects demo, is not true 3D, is the form of multiple text 3D effect, if the first load page error, please refresh the page, of course, in use does not appear this problem.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery 3D Text </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>
<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 = Math.sin + (angle) * 30;
y = + 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>
I hope this article will help you with your jquery programming.
