QQ Online customer service code with right side sidebar

Case List

Final effect:

1.html structure, mainly div,ul,li,a,img label

2.CSS Style structure

3.jquery Code

jquery main points of knowledge:

The hover () method is used here, using the syntax of $ (selector). Hover (infunction,outfunction), hover () method inside the two function, Represents the function to execute when the mouse passes and leaves. When the mouse passes, a judgment is used, because the fifth Li does not have a span tag, which uses $ (index). Index () =$ ("#slide li"). Length-1 to judge the fifth Li (whose index value is the entire Li length-1), changing only its background color. The animate () method is used, using the syntax (selector). Animate ({styles},speed,easing,callback), only the styles syntax is ( Selector). Animate ({right: "0px"}), the speed parameter can be "milliseconds", "slow", "fast".

Insist on writing jquery exercise notes, I believe you can learn jquery, refueling Ah ~

QQ Online customer service code with right side sidebar