源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

  • 时间:2022-04-27 15:14 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
很有意思。小邪就跟着做了一个Demo,木有用插件,只挂了jQuery。 [url=http://img.jb51.net/url.htm?url=http://demo.jb51.net/js/2011/juice_jquery/index.htm]Demo 演示页面 [/url] [img]http://files.jb51.net/upload/201109/20110926151604273.jpg[/img] [b]一. CSS+jQuery实现随滚动条增减汽水瓶中的液体: [/b]  话说喝汽水的那个网站是用一个瓶子的图片,分为瓶口、瓶身、吸管还有瓶底。在这些图片中瓶子内部都是透明的,所以我们可以在底下一层按 x 轴平铺液体的图片,当然记得弄好吸管,吸管则是按照 y 轴平铺。其他具体的请看代码中注释。   啊,对了,那家公司的地址在这里 - [url=http://janploch.de/]http://janploch.de/[/url] [img]http://files.jb51.net/upload/201109/20110926151605147.jpg[/img]
[url=/]<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>
二. 尾记:   总结一下,恩恩,这样子是用于大家加深对 jQuery 和设计中对视觉滴应用滴理解(其实是小邪弄得自己蛋疼然后想拉上大家一起疼),理解完之后感觉无力的还是去用插件吧 (╯_╰) (小邪表示无力+1,这样的确有点折腾人 (=_-) 的说)。嘿嘿嘿嘿嘿 o(* ̄▽ ̄*)ゞ。 演示代码打包下载[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部