From: http://www.happinesz.cn/
By sofish
Jquery is nothing new. I remember the first time I heard it was on catch the digital flow. I always think of it as a very difficult thing, so I didn't seriously understand him. It is not until the majority of CSS content has been learned that we have started to access this "write less, do more" javascr into pT framework. Today, the most important part of this article is a tutorial from web designer wall, which contains 10 special jquery effects. I don't want to translate the full text here. I want to express it in my own language. It may be easier for everyone to understand/learn it later, or to describe it more accurately.
Tip: The jquery version used in the tutorial is 1.2.3. This article is intended for beginners of jquery.
Try it first? View jquery demos | download demo zip
How does jquery work?
First, you need to download a jquery version and insert it<Head>Label. Then, you will need to write a function to tell jquery what to do. The following chart will show you how jquery works (click an image to view the big image ):
!
How to get the element )?
Writing jquery functions is very simple (thanks to the excellent instructions ). The key is to learn how to obtain the exact elements of the effect you want to achieve.
$ ("# Header ")= Get the id = "Header" element$("H3 ")= Get all $ ("Div # content. Photo ")= Obtain all elements defined by class = "photo" in <Div id = "content">$ ("Ul li ")= Obtain the <li> element in <ul>$ ("Ul Li: First ")= Only obtain the first entry in <ul> <li>
Let's start with this simple drop-down panel special effect.(View Demo),You may have seen it many times. Now, try it by yourself:
When an element containing Class = "BTN-slide" is clicked, it will drop down/raise <Div
Id = "Panel">. Switch to class = "active" in CSS to <
Class = "BTN-slide"> element .. Active will open/close the exit panel in CSS mode.
2. Simple hiding Effect$ (Document). Ready (function (){
$ (". BTN-slide "). click (function () {$ ("# panel "). slidetoggle ("slow"); $ (this ). toggleclass ("active ");});
});
When the icon in the upper-right corner is clicked, the content is hidden. For more information, see the demo.(View demo)
When an image defined as is clicked, it finds its parent element <Div class = "pane"> and activates its capabilities, gradually disappear and hide.
3 Continuous transition effect$ (Document). Ready (function (){
$ (". Pane. delete "). click (function () {$ (this ). parents (". pane "). animate ({opacity: "hide"}, "slow ");});
});
Let's take a look at the power of jquery's coherence. Just a few linesCode, I can make this square Gradient + zoom ratio fly(View demo)
line 1 : When is clicked
line 2 : activate the opacity of
4A. Foldable mode #1$ (Document). Ready (function (){
$ (". Run"). Click (function (){
$ ("# Box "). animate ({opacity: "0.1", left: "+ = 400"}, 1200 ). animate ({opacity: "0.4", top: "+ = 160", height: "20", width: "20"}, "slow "). animate ({opacity: "1", left: "0", height: "100", width: "100"}, "slow "). animate ({top: "0"}, "fast "). slideup (). slidedown ("slow") return false;
});
});
This is the first foldable style,(View demo)
The first line adds a CSS to the first The value of class is "active. The second line just hides the non-first entry in <Div class = "accordion"> <p
>.
When
4b. Foldable mode #2$ (Document). Ready (function (){
$ (". Accordion H3: First"). addclass ("active"); $ (". Accordion P: Not (: First)"). Hide ();
$ (". Accordion H3"). Click (function (){
$ (This ). next ("p "). slidetoggle ("slow "). siblings ("P: visible "). slideup ("slow"); $ (this ). toggleclass ("active"); $ (this ). siblings ("H3 "). removeclass ("active ");
});
});
This instance is very similar to #1, but it will open the specified Panel as the default panel(View demo)
In the CSS style sheet, Set. Accordion PIsDisplay: none.Now, if you open the third panel like the default opening style, you can write$ (". Accordion2 P"). eq (2). Show ();(Eq = equal) to implement it, it should be noted that the starting point is "0", rather than "1", so the third corresponds to "2", rather than "3 ".
5a. Mouse activation effect #1$ (Document). Ready (function (){
$ (". Accordion2 H3"). eq (2). addclass ("active"); $ (". accordion2 P"). eq (2). Show ();
$ (". Accordion2 H3 "). click (function () {$ (this ). next ("p "). slidetoggle ("slow "). siblings ("P: visible "). slideup ("slow"); $ (this ). toggleclass ("active"); $ (this ). siblings ("H3 "). removeclass ("active ");});
});
This will achieve a very beautiful effect, when the mouse passes through the gradient appears(View demo)
When you move the mouse over the menu, it looks for the next <em> and activates its opacity above it.
5b. Mouse activation #2$ (Document). Ready (function (){
$ (". Menu "). hover (function () {$ (this ). next ("em "). animate ({opacity: "show", top: "-75"}, "slow") ;}, function () {$ (this ). next ("em "). animate ({opacity: "hide", top: "-85"}, "fast ");});
});
This instance will displayTitleAttribute attribute to exist as a variable and add the <em> label(View demo)
Add an empty<Em>To the menu<A>Element.
When you move the cursor over the menu link, the title attribute is displayed, and displayed as "hovertext (hidden )".<Em>The value of hidden text is displayed.
6. Clickability of the entire block$ (Document). Ready (function (){
$ (". Menu2 a"). append ("<em> </em> ");
$ (". Menu2 "). hover (function () {$ (this ). find ("em "). animate ({opacity: "show", top: "-75"}, "slow"); var hovertext = $ (this ). ATTR ("title"); $ (this ). find ("em "). text (hovertext);}, function () {$ (this ). find ("em "). animate ({opacity: "hide", top: "-85"}, "fast ");});
});
This example will show you how to achieve the clickability of elements in the content. The best web gallery sidebar tab will show this effect.(View demo)
If you want the class = "pane-list"<Ul> <Li>Click (entire block). You can assign a function to ". pane-list li" so that the function can be found when it is clicked.<A>Element, redirected to itsHrefAttribute Value.
7. Retractable panel$ (Document). Ready (function (){
$ (". Pane-list li "). click (function () {window. location = $ (this ). find (""). ATTR ("href"); Return false ;});
});
Let's combine the above instances to create a retractable Panel (like gmai inbox panel L ). The author also applies this in the next2friends Comments List of web designer wall.(View demo)
first line : hide the elements after the first element in
is clicked, show/hide
8. Imitating the WordPress background comment Management Panel$ (Document). Ready (function (){
// Hide message_body after the first one $ (". message_list. message_body: GT (0)"). Hide ();
// Hide message Li after the 5th $ (". message_list Li: GT (4)"). Hide ();
// Toggle message_body $ (". message_head "). click (function () {$ (this ). next (". message_body "). slidetoggle (500) return false ;});
// Collapse all messages $ (". collpase_all_message"). Click (function () {$ (". message_body"). slideup (500) return false ;});
// Show all messages $ (". show_all_message "). click (function () {$ (this ). hide () $ (". show_recent_only "). show () $ (". message_list Li: GT (4 )"). slidedown () return false ;});
// Show recent messages only $ (". show_recent_only "). click (function () {$ (this ). hide () $ (". show_all_message "). show () $ (". message_list Li: GT (4 )"). slideup () return false ;});
});
I think you may have seen this most times in the WordPress background comment Management Panel. Well, let's use jquery to simulate its effect. To realize the background color, you need to includeColor animationsThis plugin(View Demo)
First line: Add "Alt" class to <Div class = "pane">
Second part: When <a class = "BTN-Delete"> is clicked, the opacity of <Div class = "pane"> is activated.
Third part: When <a class = "BTN-unapprove"> is clicked, first set <Div class = "pane"> to yellow and then white, and add a class (addclass) "spam"
Fourth Part: When <a class = "BTN-approve"> is clicked, first set <Div class = "pane"> to green and then white, and remove the class (removeclass) "spam"
Th part: When <a class = "BTN-spam"> is clicked, the background color is red and opacity = "hide" is activated"
// Don't forget to include the color animations plugin // <SCRIPT type = "text/JavaScript" src = "jquery. color. js"> </SCRIPT>
$ (Document). Ready (function (){
$ (". Pane: Even"). addclass ("Alt ");
$ (". Pane. BTN-Delete"). Click (function () {alert ("this comment will be deleted! ");
$ (This ). parents (". pane "). animate ({backgroundcolor: "# fbc7c7"}, "fast "). animate ({opacity: "hide"}, "slow") return false ;});
$ (". Pane. BTN-unapprove "). click (function () {$ (this ). parents (". pane "). animate ({backgroundcolor: "# fff568"}, "fast "). animate ({backgroundcolor: "# ffffff"}, "slow "). addclass ("spam") return false ;});
$ (". Pane. BTN-approve "). click (function () {$ (this ). parents (". pane "). animate ({backgroundcolor: "# dafda5"}, "fast "). animate ({backgroundcolor: "# ffffff"}, "slow "). removeclass ("spam") return false ;});
$ (". Pane. BTN-spam "). click (function () {$ (this ). parents (". pane "). animate ({backgroundcolor: "# fbc7c7"}, "fast "). animate ({opacity: "hide"}, "slow") return false ;});
});
If you have a project that needs to display multiple images and you do not want to link them to another page, you can load the JPG of the target link on the current page.(View demo)
First, add a <em> to H2 tag.
When the elements in <P class = thumbs> are clicked:
-Visualized displayHref"Largepath" Path of the attribute
-Visualized displayTitleAttribute "largealt"
-Replace SCRThe visible "largepath" path in the property, and replace itALTVisible "largealt" in the attribute"
-SetEmContent (Within H2) Is visible largealt
10. Customize different link styles$ (Document). Ready (function (){
$ ("H2"). append ('<em> </em> ')
$ (". Thumbs a"). Click (function (){
VaR largepath = $ (this). ATTR ("href"); var largealt = $ (this). ATTR ("title ");
$ ("# Largeimg"). ATTR ({SRC: largepath, alt: largealt });
$("H2 em" 2.16.html ("(" + largealt + ")"); Return false ;});
});
In modern browsers, personalized links are easy to use. To display special styles in a file, you only need to add simple CSS rules:A [href has been 'shanghai'] {… }But unfortunately IE6 does not support this. To achieve this, you can use jquery(View demo)
The first three lines of code must be continuous.<A>Is a CSS class in the href attribute.
The second part gets the <A> element of all href without "http://www.webdesignerwall.com" and/or without "#", and adds "external" class and target = "_ blank ".
$ (document ). ready (function () {
$ ("A [@ href $ = PDF]"). addclass ("pdf");
$ ("A [@ href $ = zip]"). addclass ("Zip");
$ ("A [@ href $ = PSD]"). addclass ("PSD");
$ ("A: Not ([@ href * = http://www.webdesignerwall.com])"). not ("[href ^ = #]"). addclass ("external "). ATTR ({target: "_ blank"});
});
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
