jQuery CSS实现了汽水瓶内液体效果随滚动条增减

很有意思。小谢做了一个演示，这是一个有用的插件，但是只有jQuery。演示页面

1.CSS jQuery实现用滚动条增减汽水瓶内液体：据说喝汽水的网站用的是一个瓶子的图片，分为瓶口、瓶身、吸管、瓶底。在这些图片中，瓶子的内部是透明的，所以我们可以根据X轴将液体的图片平铺在底层。当然记得固定吸管，吸管按照Y轴平铺。有关详细信息，请参考代码中的注释。啊，对了，那家公司的地址是here-http://janploch.de/。

复制代码如下： body { background : # fffurl(BG _ site . png)；margin:0} #果汁，#果汁。内部，#瓶，#瓶。页脚，#瓶子。内容，#瓶。标题，#中间。内部{ margin:0 auto}/* * #带或不带margin:0 auto的果汁；没关系*因为位置：固定；所以margin:0汽车；自然会无效*因为#bottle无法精确设置宽度，自然要加上margin:0 auto没用的。*嘿，嘿，这些都是小邪恶的错误。* * #瓶子。页脚，#瓶子。内容，#瓶。表头*是瓶底、瓶身、瓶口*和剩余#果汁的图片。内部和#mid。内部分别是*液体沿x轴平铺在中央，吸管沿y轴平铺在中央*/# monitor { position : fixed；top:10pxleft:10pxcolor : # f0f 0；z指数：999；} /* * #monitor是左上角的提示文本区。请参考JS评论区*/# juice { width 336099%；位置：固定；top:2000px} #果汁。内部{ width:1165pxbackground : URL(juice . png)repeat-x；高度height:2000px}/* * #果汁设置在外层固定的位置：宽度：99%；*位置：固定；表示绝对定位的元素，它相对于浏览器窗口定位。* #果汁。内层设置为margin33600auto宽度width:1165px*通过这种配合，我们可以达到居中不随滚动条移动的效果*/#瓶{ width :99%；文本对齐：居中；位置：绝对；top:0}/* * position : absolute；top:0*这样做是因为绝对定位的东西太多，以免瓶身被遮挡* text-align : center；别管纯粹的蛋疼*/# bottle . header { background : URL(bottle _ top.png)no-repeat；宽度width:1175px高度height:2648px} #瓶子。content { background : URL(content _ BG . png)repeat-y；高度：500 px；宽度width:1186px} #瓶子。页脚{ background : URL(BG _ footer . png)不重复；宽度width:1184px高度：567 px；}/* *瓶子分别有三个部分，很简单o(*￣￣*)*/# mid { width :99%；位置：固定；z指数：-999；}/* *这里的效果和#juice一样，z-index :-999；说在底部*/#中间。内部{ width:92px高度height:2000pxbackground : URL(stro halm _ mid . png)repeat-y；} /* * #mid。inner是straw *//style script type=' text/JavaScript ' jQuery(文档)的图片设置。ready(function($){//记得在这段代码之前挂起jquery库。我忘了拿出我的童鞋，给JJ剪了一个小时的衣服。scroll(function() {//滚动条触发事件，目标是整个窗口，也就是这个窗口的滚动条$ ('# monitor ')。html ('scrolltop3360' $(窗口)。scroll top())；//监控if ($(窗口)的值。scrollTop () 1108) $ ('# juice ')。CSS ('top '，490 815-$(窗口)。scrolltop())在# monitorElse $ ('# juice ')。CSS ('top '，$(窗口)。scroll top()/2900 * 580)//$(window)。scrolltop () 1108，液体停止增加，并随着滚动条被拉起而向下移动。//否则根据滚动条滚动比例增减。//108.$(窗口)的值。scrollTop () //2900是页面的高度，580是窗口的部分高度。//490 815.我不知道它是什么。(其实这家伙忘了//反正滚动条拉起来的时候他离窗口顶远了。);})/script div id=' demo _ menu ' style=' position : fixed；bottom:10pxleft:10px' z-index :999；'a style=' color: # fff'Href='/'返回/a/Div Div id=' monitor ' style=' scroll top : 0/Div id=' juice ' Div class=' inner '/Div/Div id=' mid ' Div class=' inner '/Div/Div id=' bottle ' Div class=' header '/Div Div class=' content '/Div class=' footer '/Div/Div II。结束语，嗯嗯，这是为了大家加深对jQuery的理解，以及视觉滴在设计中的应用(其实就是一个小恶魔让自己的蛋受伤然后想拉着大家一起受伤)。如果理解后觉得无能为力，就要用插件(_)(“有点恶”就是无能为力1，对人来说确实有点痛(=_-))。嘿嘿嘿嘿嘿嘿(* ~~*)。演示代码的包下载。