Demo 演示页面
一. CSS+jQuery实现随滚动条增减汽水瓶中的液体：
话说喝汽水的那个网站是用一个瓶子的图片，分为瓶口、瓶身、吸管还有瓶底。在这些图片中瓶子内部都是透明的，所以我们可以在底下一层按 x 轴平铺液体的图片，当然记得弄好吸管，吸管则是按照 y 轴平铺。其他具体的请看代码中注释。
啊，对了，那家公司的地址在这里 - http://janploch.de/
复制代码 代码如下:
body {background:#fff url(bg_site.png);margin:0;}
#juice, #juice .inner, #bottle, #bottle .footer, #bottle .content, #bottle .header, #mid .inner {margin:0 auto;}
#monitor {
position:fixed;
top:10px;
left:10px;
color:#f0f0f0;
z-index:999;
}
#juice {
width:99%;
position:fixed;
top:2000px;
}
#juice .inner {
width:1165px;
background:url(juice.png) repeat-x;
height:2000px;
}
#bottle {
width:99%;
text-align:center;
position:absolute;
top:0;
}
#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;
}
#mid {
width:99%;
position:fixed;
z-index:-999;
}
#mid .inner {
width:92px;
height:2000px;
background:url(strohalm_mid.png) repeat-y;
}
返回
scrollTop: 0
二. 尾记：
总结一下，恩恩，这样子是用于大家加深对 jQuery 和设计中对视觉滴应用滴理解（其实是小邪弄得自己蛋疼然后想拉上大家一起疼），理解完之后感觉无力的还是去用插件吧 (╯_╰) （小邪表示无力+1，这样的确有点折腾人 (=_-) 的说）。嘿嘿嘿嘿嘿 o(*￣▽￣*)ゞ。
演示代码打包下载
