How jQuery implements 3D text effects
This article mainly introduces jQuery's method of implementing 3D text effects. You can use the mouse and css style to implement text effects. For more information, see
This article describes how jQuery implements 3D text effects. Share it with you for your reference. The details are as follows:
This jQuery-based 3D text effect demonstration is not a real 3D, but a 3D effect formed by multiple texts. If an error occurs when loading a webpage for the first time, refresh the page, of course, this problem will not occur during use.
The Code is as follows:
<! 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 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 {
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 = "#"> demo-oso </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 ');;
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"
((Elementpoliciuncs.css ("fontSize", size + "pt ");
Optional (elementpoliciuncs.css ("opacity", size/100 );
((Elementpoliciuncs.css ("zIndex", size );
Optional (elementpoliciuncs.css ("left", leftValue );
Optional (elementpoliciuncs.css ("top", y + "% ");
}
Offset + = stepping;
}
});
</Script>
</Body>
</Html>
I hope this article will help you with jQuery programming.
