Very interesting. Small Evil Then do a demo, wood useful plug-ins, only hang jquery.
The website that drinks soda is to use a picture of a bottle, be divided into bottle bottle body, straw and bottle bottom. In these pictures the inside of the bottle is transparent, so we can at the bottom of the x-axis to tile the picture of the liquid, of course remember to fix the straw, the straw is in accordance with the Y axis tile. Other details please see the comments in the code.
Body {background: #fff URL (bg_site.png); margin:0;}
#juice, #juice. Inner, #bottle, #bottle. Footer, #bottle. Content, #bottle. Header, #mid. inner {margin:0 auto;}
/*
* #juice plus margin:0 auto; It doesn't matter.
* Because of position:fixed; , so margin:0 auto; It's not natural.
* Because #bottle can not set the width accurately, so naturally add margin:0 auto; It's useless.
* Hey, these are all minor mistakes
*
* #bottle. Footer, #bottle. Content, #bottle. Header these few
* A picture of the bottle bottom, the bottle body and the bottle mouth
* The remaining #juice. Inner and #mid. Inner, respectively.
* is centered on the x-axis of the liquid and centered on the y-axis of the straw tile
*/
#monitor {
position:fixed;
top:10px;
left:10px;
Color: #f0f0f0;
z-index:999;
}
/*
* #monitor is the upper left corner of the hint text area, specific view JS comment section
*/
#juice {
width:99%;
position:fixed;
top:2000px;
}
#juice. Inner {
width:1165px;
Background:url (juice.png) repeat-x;
height:2000px;
}
/*
* #juice The outer layer is set to position:fixed; width:99%;
* position:fixed; An absolutely positioned element that is positioned relative to the browser window
* #juice. Inner is set to margin:0 auto in the layer; width:1165px;
* This can be done to be both centered and does not move with the scroll bar effect
*/
#bottle {
width:99%;
Text-align:center;
Position:absolute;
top:0;
}
/*
* Position:absolute; top:0;
* This is done because there are so many things that are absolutely positioned to prevent the location of the bottle.
* Text-align:center; Pure egg hurts Don't care
*/
#bottle. Header {
Background:url (bottle_top.png) no-repeat;
width:1175px;
height:2648px;
}
#bottle. Content {
Background:url (content_bg.png) repeat-y;
height:500px;
width:1186px;
}
#bottle. Footer {
Background:url (bg_footer.png) no-repeat;
width:1184px;
height:567px;
}
/*
* Separate the three parts of the bottle, very simple O (*￣▽￣*) ゞ
*/
#mid {
width:99%;
position:fixed;
z-index:-999;
}
/*
* Here the effect with #juice, z-index:-999; The representation is on the bottom.
*/
#mid. Inner {
width:92px;
height:2000px;
Background:url (strohalm_mid.png) repeat-y;
}
/*
* #mid. Inner is the picture setting of the eyedropper
*/
</style>
<script type= "Text/javascript" >
JQuery (document). Ready (function ($) {
Remember to hang the JQuery Kuha in front of this code, forget the children's shoes pull out and cut JJ for an hour.
$ (window). Scroll (function () {
The scroll bar triggers the event, and the target is the entire window, which is the scroll bar for this window
$ ("#monitor"). HTML ("ScrollTop:" +$ (Window). scrolltop ());
Monitor the value of $ (window). scrolltop () at any time in the #monitor
if ($ (window). scrolltop () <1108) $ ("#juice"). CSS (' top ', 490+815-$ (window). scrolltop ());
else $ ("#juice"). CSS (' Top ', $ (window). scrolltop ()/2900*580)
$ (window). scrolltop () <1108 The liquid stops increasing and moves down with the scroll bar
Conversely, the ratio of rolling by the scroll bar increases or decreases
1108 is when the liquid should stop increasing, $ (window). Value of ScrollTop ()
2900 is the height of the page, 580 is the height of the window.
490 815 What's a little evil just don't know what it is (in fact, this guy forgot.
Anyway, it's pulling off the scroll bar and away from the top of the window.
});
})
</script>
<div id= "Demo_menu" style= "position:fixed;bottom:10px;left:10px;z-index:999;" ><a style= "color: #fff;" href= "/" > Return </a></div>
<div id= "Monitor" style= "" >scrollTop:0</div>
<div id= "Juice" ><div class= "inner" ></div></div>
<div id= "Mid" ><div class= "inner" ></div></div>
<div id= "Bottle" >
<div class= "Header" ></div>
<div class= "Content" ></div>
<div class= "Footer" ></div>
</div>
Two. Tail Note:
To sum up, well, this is for everyone to deepen the understanding of the visual drop in JQuery and design (in fact, it is small evil to make their own eggs and want to pull together pain), after understanding the feeling powerless or to use Plug-ins Bar (╯_╰) (small evil said powerless +1, so there is a point toss people (=_-) Said). Hey Hey Hei hei hey O (*￣▽￣*) ゞ.
