JS floating fixed layer (couplet floating advertisement, floating with the scroll bar)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en ""Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns ="Http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta http-equiv = "content-language" content = "ZH-CN"/>
<Meta name = "design Corp" content = "myhhe.cn"/>
<Meta name = "designer" content = "Hayden"/>
<Meta name = "designer mail" content = "QQ: 3996992"/>
<Meta name = "Robots" content = "Hayden"/>
<Title> floating layer </title>
<Style type = "text/CSS">
Div. Floats {/* General floating container style */
Position: absolute;
Left:-1000px;
/* The preceding two statements are required. The actual conditions are as follows */
Border: solid 1px #777;
Padding: 3px;
Background: #333;
Color: white;
Width: 100px;
Height: 80px;
Opacity: 0.5;
Filter: alpha (opacity = 50 );
}
Div # test1, div # Test2 {top: 100px;}/* center left and right to locate the initial height of the container */
Div # test3, div # test4 {top: 200px;}/* Initial height of the two containers located on the left and right */
</Style>
<SCRIPT type = "text/JavaScript">
VaR d = new function ('obj ', 'Return document. getelementbyid (OBJ );')
Function htmlbody (){
Return (
Document.doc umentelement. clientheight <= Document. Body. clientheight
&&Document.doc umentelement. clientheight! = 0
)
? Document.doc umentelement: Document. Body;
}
// Browser scroll bar position
Function scrollleft () {return (! Window. pageyoffset )? Htmlbody (). scrollleft: window. pagexoffset ;}
Function scrolltop () {return (! Window. innerheight )? Htmlbody (). scrolltop: window. pageyoffset ;}
// The actual distance from the left
Function getleft (strobjs, strlefttype, strleft ){
VaR temp_getleft = 0;
If (strlefttype = "Left "){
Temp_getleft = scrollleft () * 1 + strleft * 1;
} Else if (strlefttype = "mid "){
(Strleft * 1 <0)
? Temp_getleft = scrollleft () * 1 + strleft * 1
+ Htmlbody (). clientwidth * 1/2-strobjs. offsetwidth * 1
: Temp_getleft = (scrollleft () * 1 + strleft * 1 + htmlbody (). clientwidth * 1/2 );
} Else if (strlefttype = "right "){
Temp_getleft
= Scrollleft () * 1 + htmlbody (). clientwidth * 1
-Strleft * 1-strobjs. offsetwidth * 1;
}
Return temp_getleft;
}
Function movetips (strobj, thetop, theleft, thelefttype ){
VaR old, nowobj = D (strobj );
VaR nowleft = nowobj. style. Left. Replace ("PX", "") * 1; // return the left distance (numeric value) before changing the window size or moving the horizontal scroll bar)
VaR temp_left = getleft (nowobj, thelefttype, theleft); // the actual distance from the left
VaR re_thetop = thetop;
If (temp_left! = Nowleft) {// increase horizontally
(Math. Abs (temp_left-nowleft)> 3 & math. Abs (temp_left-nowleft) <600)
? (Temp_left> nowleft )? Nowleft + = math. Abs (temp_left-nowleft)/5
: Nowleft-= math. Abs (temp_left-nowleft)/5)
: Nowleft = temp_left;
Nowobj. style. Left = nowleft + "PX ";
}
If (! Openweb) {old = re_thetop; var openweb;}/* This is the default height */;
VaR POs, TT = 50;
Pos = scrolltop () * 1-nowobj.offsettop * 1 + re_thetop * 1;
Pos = nowobj. offsettop + POS/10; // start to increase vertically
If (Pos <re_thetop) Pos = re_thetop;
If (Pos! = Old) {nowobj. style. Top = POS + "PX"; TT = 5 ;}
Old = Pos;
SetTimeout ("movetips ('" + strobj + "', '" + thetop + "', '" + theleft + "', '" + thelefttype + "')", TT );
}
</SCRIPT>
</Head>
<Body>
<Div style = "width: 660px; Border: 1px solid # Eee; margin: 0 auto; Height: 3000px;">
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
There are a lot of carriage returns...
</Div>
No, it's the end ~~~~ No, it's the end ~~~~ No, it's the end ~~~~ No, it's the end ~~~~ No, it's the end ~~~~ No, it's the end ~~~~ No, it's the end ~~~~ No, it's the end ~~~~ No, it's the end ~~~~
<Div style = "width: 5000px;">
</Div>
<Div id = "test1" class = "floats"> floating layer 1! <Br/> center to the right <br/> </div>
<Div id = "Test2" class = "floats"> floating layer 2! <Br/> center to left <br/> </div>
<Div id = "test3" class = "floats"> floating Layer 3! <Br/> left-side <br/> </div>
<Div id = "test4" class = "floats"> floating Layer 4! <Br/> right side <br/> </div>
<SCRIPT type = "text/JavaScript">
Movetips ('test1', '000000', '000000', 'mid ', "0"); // The parameters are respectively the Object ID, top distance, and center distance, the positioning method is center to both sides (optional values: Left, mid, right), the fifth parameter is to be determined, and the upper and lower positioning is still being considered, such as the upper and lower distance center positioning, you have time to scale it out ~
Movetips ('test2', '000000', '-66661', 'mid', "0 ");
Movetips ('test3', '123', '10', 'left', "1 ");//
Movetips ('test4', '123', '10', 'right', "1 ");
</SCRIPT>
</Body>
</Html>
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
