Copy codeThe Code is as follows:
(Function (){
QQMenuInt = _ QQMenuInt;
MoveQQmenu = _ moveQQmenu;
Function _ QQMenuInt (){
QQMenu. style. position = "absolute ";
QQMenu. style. display = "";
If(parseInt(document.doc umentElement. offsetWidth)> 1024 ){
Qqmenuposition.left?((parseint(document.doc umentElement. offsetWidth)-1024-20 );
}
If (QQMenuPosition. isRight ){
QQMenu. style. right = QQMenuPosition. Left + "px ";
} Else {
QQMenu. style. left = QQMenuPosition. Left + "px ";
}
QQMenu. style. top = QQMenuPosition. Top + "px ";
MoveQQmenu ();
}
Function _ moveQQmenu (){
Var from = parseInt (QQMenu. style. top, 10 );
Var yOffset;
Var to = window. pageYOffset? Window. pageYOffset: document.doc umentElement. scrollTop;
To = to + QQMenuPosition. Top;
If (! = From ){
YOffset = Math. ceil (Math. abs (to-from)/20 );
If (to <from) yOffset =-yOffset;
Var oldTop = parseInt (QQMenu. style. top, 10 );
QQMenu. style. top = (oldTop + yOffset) + "px ";
}
If (QQMenu. style. display! = "None "){
Window. setTimeout ("moveQQmenu ()", QQMenuPosition. timeout );
}
}
})()
Usage:
1. Introduce the above js
2. Add
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var QQMenuPosition = {Left: 10, Top: 200, isRight: false, timeout: 10}
Var QQMenu = document. getElementById ("QQMenu ");
QQMenuInt ();
</Script>
QQMenu is the outermost layer ID of the floating layer
QQMenuPosition is used to set floating layer parameters.
Left: the offset between the layer and the Left. If isRight is true, it is the offset relative to the right.
Top: the offset between the layer and the Top.
Timeout: layer movement interval. The larger the time, the slower the time.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> Untitled </title> <style type = "text/css">/* QQ online customer service office */. kefuchu {width: pixel PX ;}. SS_dh1 {background: url (http://img.jb51.net/online/qq/images/SSindex/SS_dh1.jpg) no-repeat; height: 51px; width: 84px; float: left }. SS_dh2 {background: url (http://img.jb51.net/online/qq/images/SSindex/SS_dh2.jpg) no-repeat; height: 51px; width: 25px; float: left; display: block }. SS_dh3 {background: url (http://img.jb51.net/online/qq/images/SSindex/SS_dh3.jpg) repeat-y; width: pixel ;}. SS_dh4 {background: url (http://img.jb51.net/online/qq/images/SSindex/SS_dh4.jpg) no-repeat; height: 17px; width: pixel PX ;}. SS_dh5 {background: url (http://img.jb51.net/online/qq/images/SSindex/SS_dh5.jpg) no-repeat; height: 23px; width: 74px; margin-left: 20px ;} </style> </pead> <body> fsdafsdfsfsdf contains two missing fsdafsdfsfsdf </pead> /body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Package download