Home > Developer > JavaScript
JQuery implements 3D text effects and jquery3d text effects.
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.
Copy codeThe 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
