Common dynamic effects on webpages-customer service advertisements and dynamic effects-Customer Service

Common dynamic effects on webpages-customer service advertisements and dynamic effects-Customer Service

The key is to set the switch identifier. The parent box is fixed and the button box is definitely located beyond the parent box.

Html code:

<Div>

<Span> </span>
</Div>

CSS code:

Div {
Width: pixel PX;
Height: 311px;
Background: lightseagreen;
Position: fixed;
Right:-pixel PX;
Top: 50%;
Margin-top:-155px;
}
Div span {
Position: absolute;
Left:-29px;
Top: 50%;
Cursor: pointer;
Margin-top:-58px;
}

JQ code:

<Script> $ (function () {// switch button, which has two States. First, there is an initial state var flag = 1; $ ('div size '). on ('click', function () {if (flag = 1) {$ (this ). parent (). animate ({right: 0}, 500); $ (this ). children ('img '). attr ('src', 'images/qqLOpen.jpg '); flag = 0;} else if (flag = 0) {$ (this ). parent (). animate ({right:-131}, 500); $ (this ). children ('img '). attr ('src', 'images/qqL.jpg '); flag = 1 ;}})}) </script>