Thank you for your support.
Haha give you a piece
Dear everyone:
You got up for 11 minutes and beat 10% students nationwide.
Another student in the dormitory failed to get up and is restarting. All the dormitories next door are dead!
Haha
Today I want to talk about "style operations".
<Body>
<PClass= "Myp">
I am the paragraph you want to operate</P>
</Body>
This is the paragraph to be operated.
We need to reference the jquery JS file first, you know
< Style Type = "Text/CSS" >
. Myp
{
Background : Red ;
}
. Changecolor
{
Background : Green ;
}
</ Style >
< Script SRC = "Jquery-1.5.1.min.js" Type = "Text/JavaScript" > </ Script >
< Script Type = "Text/JavaScript" >
$ ( Function (){
$ ( " P " ). ATTR ( " Class " , " Changecolor " );
// By the way, I didn't tell you that the annotation mark in jquery is "//".
});
// Then$ ("P"). ATTR ("Class","Changecolor"); // SetStyle sheet "CSS"
</ Script >
The idea is the same. Here are several other methods for operating the style sheet.
Append style addclass ("myclass") (other styles are not affected ),
Remove style removeclass ("myclass "),
The above usage is the same,CodeI don't want to write it anymore. Everyone should implement the building by themselves. Haha
Then, let's start with several examples. First, let's look at the first example.
As we all know, now you are like Youku, Tudou, and watching videos online, there is a switch light effect. Below we also implement a simple switch light effect. I will mainly explain the principle, I hope you can give me some better results.
First, for the convenience of demonstration, prepare a "beautiful image" Haha, pretty
Oh, you can take pictures by yourself. I don't care.
Then begin to write the code.
< Body >
< Input Type = "File" />
< Input Type = "Text" Value = "We cannot close the light" />
< Input Type = "Button" Value = "We cannot close the light" />
< Div ID = "Shadowdiv" Class = "Hiddiv" >
</ Div >
< Div ID = "Divshow" >
< Input ID = "BTN" Type = "Button" Value = "Turn on/off the light" />
< IMG ID = "Imgshow" SRC = "21.jpg" ALT = "I Am a front-end image" />
</ Div >
</ Body >
The above is the theme part of the HTML code. I don't think it is important.
Continue below
<Style type = "text/CSS">
. Hiddiv
{
Display : None ; // Hide the DIV
}
. Showdiv
{
Display : Block ; // Display Div
Position : Absolute ;
Top : 0 ;
Left : 0px ;
Width : 100% ;
Height : 100% ;
Border : 1px solid black ;
Background-color : Gray ;
Z-Index : 2 ;
Filter : Alpha (opacity = 70) ; // Transparent effect under IE
Opacity : 0.7 ; // The transparency under FF gg
}
# Divshow
{
Position : Absolute ;
Z-Index : 3 ;/* This is a layer. The display layer is always at the top. You can set it to 999,999, as long as it is larger than the one above */
}
</Style>
CSS topic
< Script SRC = " Jquery-1.5.1.min.js " Type = " Text/JavaScript " > < / SCRIPT>
< Script Type = " Text/JavaScript " >
$ ( Function (){
$ ( " # BTN " ). Click ( Function (){
If ($ ( " # Shadowdiv " ). ATTR ( " Class " ) = " Showdiv " ){
$ ( " # Shadowdiv " ). ATTR ( " Class " , " Hiddiv " );
}
Else
$ ( " # Shadowdiv " ). ATTR ( " Class " , " Showdiv " );
});
$ ( " Input " ). ATTR ( " Tabindex " , " -1 " ); // I think you 'd better hurry up and figure it out.
});
< / SCRIPT>
This is the most important JQ code. I have explained it to you by commenting on it. I hope you can achieve better results,
Effect before turning off the light
Effect after turning off the light
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
