October 21, 2017 CSS common style & amp; mouse style and jQuery mouse event & amp; jQuery image carousel & amp; jQuery Image Automatic carousel code, October 21, 2017 css

October 21, 2017 CSS common styles & mouse styles and jQuery mouse events & jQuery image carousel & jQuery Image Automatic carousel code, October 21, 2017 css

Css code

 

Background and prospects

Background-color: #0000; background color, high style sheet priority

Background-image: url (PATH); set the background image

Background-attachment: fixed; the background is fixed and does not scroll with the font

Background-attachment: scroll; the background scrolls with the font

Background-repeat: no-repeat; no-repeat not tiled repeat-x horizontally tiled repeat-y vertically tiled

Background-position: center; center of the background image. When setting the background image position, set repeat to no-repeat.

 

Important

 

All transparency

Opacity: 0.7;

Transition Effect

Transition: set the number of seconds;

Rounded corner

Border-radius: Set the pixel value;

Shadow

Box-shadow: 5px (to the right) 5px (down) 5px (virtualized) add color;

Text-shadow: sew (add the pixel value above); text shadow

Rotation Angle

Tramsform: skew (you can select the rotation mode) (plus the rotation angle)

Unordered list

<Ul> <li></Ul>

Top: top

Bottom: bottom

Left: left

Right: right

Padding + direction can be changed to only one side (more input)

Margin (margin)

 

 Mouse move trigger

 A: hover {

}

Access Style

A: link {

}

Post-access Style

 A: visited {

}

Selected link Style

A: active {

}

 

 

JQuery code

 

Mouse move event triggered

Mouseover ()

Trigger the mouse removal event

Mouseout ()

Trigger the mouse click event

Click ()

Double-click event trigger

Dbclick ()

Trigger by pressing the mouse event

Mousedown ()

Release mouse event trigger

Mouseup ()

 

 

 

 JQuyer code example

 

, Weibo, authorization, trademark registration, mouse click fade in and fade out Effect

If you want to change the mouse, you can change click () to mouseover ()

Each button must have a button, such as <div> </div> <input type = "button"/>...

Alternatively, you can add an id to each <div> </div> without a value. You can directly use "#" to obtain the id name.

Eq () is a parameter. Note: (eq () starts from scratch)

Weixin = $ (". weixin ")
Weibo = $ (". weibo ")
Shouquan = $ (". shouquan ")
Zhuce = $ (". zhuce ")
Baseb = $ (". base-B ")
Baseb. eq (3). ready (function (){
Baseb. eq (3). click (function (){
Zhuce. fadeToggle ("slow ")
})
})
Baseb. eq (4). ready (function (){
Baseb. eq (4). click (function (){
Shouquan. fadeToggle ("slow ")
})
})
Baseb. eq (5). ready (function (){
Baseb. eq (5). click (function (){
Weibo. fadeToggle ("slow ")
})
})
Baseb. eq (6). ready (function (){
Baseb. eq (6). click (function (){
Weixin. fadeToggle ("slow ")
})
})

Image carousel code

First, set several images. Here I set three images.

When the button is set to carousel or when you click it, the background color will change.

The Code is as follows:

Toplogo = $ (". top-logo"); // The toplogo is an image. Note: (do not add "-" or "top-logo" to the previous name)
Gap = $ (". gap-B"); // gap is a button
Ws = 1; // starts from the first loop
Gap.eq(0).css ("background-color", "# A52A2A ")

Function move (){
If (ws! = 3 ){
Toplogo. stop ();
Toplogo. animate ({
MarginLeft: ws * (-1349) + "px"
},
500,
Function (){
Ws ++;
})
}
If (ws = 3 ){
Toplogo. stop ();
Toplogo. animate ({
MarginLeft: 0 + "px"
},
500,
Function (){
Ws = 1;
Gap.css ("background-color", "white ")
Gap.eq(0).css ("background-color", "# A52A2A ")
})
}

If (ws = 0 ){
Gap.css ("background-color", "white ")
Gap.eq(0).css ("background-color", "# A52A2A ")
}
If (ws = 1 ){
Gap.css ("background-color", "white ")
Gap.eq(1).css ("background-color", "# A52A2A ")
}
If (ws = 2 ){
Gap.css ("background-color", "white ")
Gap.eq(22.16.css ("background-color", "# A52A2A ")
}

}

 

Automatic Image carouselCode

The Code is as follows:

Window. setInterval (move, 2500) // set millisecond after move
Gap. eq (1). mouseover (function (){
Gap.css ("background-color", "white ")
Gap.eq(1).css ("background-color", "# A52A2A ")

})
Gap. eq (2). mouseover (function (){
Gap.eq(22.16.css ("background-color", "# A52A2A ")
Gap.eq(1).css ("background-color", "white ")
Gap.eq(0).css ("background-color", "white ")
})
Gap. eq (0). mouseover (function (){
Gap.eq(0).css ("background-color", "# A52A2A ")
Gap.eq(1).css ("background-color", "white ")
Gap.eq(2).css ("background-color", "white ")
})
Gap. eq (0). mouseover (function (){
Toplogo. animate ({
MarginLeft: 0 + "px" // The First carousel is 0 pixels
},
500,
Function (){

})
})
Gap. eq (1). mouseover (function (){
Toplogo. animate ({
MarginLeft: (-1349) + "px" // The second time is the width of the image.
},
500,
Function (){

})
})
Gap. eq (2). mouseover (function (){
Toplogo. animate ({
MarginLeft: (-2698) + "px" // This is the width after the third image
},
500,
Function (){

})
})