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

 更新时间:2011年09月26日 15:17:32   作者:  
一个很有意思的网站,那个网站是一家德国汽水公司的网站(德文神马的),网站首页有一个汽水瓶,汽水瓶里的水会随着我们向下拉滚动条而减少。
很有意思。小邪就跟着做了一个Demo,木有用插件,只挂了jQuery。
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;}
/*
* #juice 加不加 margin:0 auto; 无所谓啦
* 因为 position:fixed; 了所以 margin:0 auto; 自然就失效了
* 因为 #bottle 无法准确设置宽度,所以自然加 margin:0 auto; 也没用了
* 嘿嘿,这些都是小邪的错误
*
* #bottle .footer, #bottle .content, #bottle .header 这几个
* 分别是瓶底、瓶身、瓶口几个位置的图片
* 剩下的 #juice .inner 和 #mid .inner 则分别
* 是居中按 x 轴平铺的液体和居中按 y 轴平铺的吸管咯
*/
#monitor {
position:fixed;
top:10px;
left:10px;
color:#f0f0f0;
z-index:999;
}
/*
* #monitor 则是左上角的提示文字区域,具体查看JS注释部分
*/
#juice {
width:99%;
position:fixed;
top:2000px;
}
#juice .inner {
width:1165px;
background:url(juice.png) repeat-x;
height:2000px;
}
/*
* #juice 在外层设置为 position:fixed; width:99%;
* position:fixed; 的意思是绝对定位的元素,相对于浏览器窗口定位
* #juice .inner 在里层设置为 margin:0 auto; width:1165px;
* 这样配合好就能做出既是居中又是不随滚动条移动的效果
*/
#bottle {
width:99%;
text-align:center;
position:absolute;
top:0;
}
/*
* position:absolute; top:0;
* 这样做因为绝对定位的东西多了,防止妨碍到瓶体的位置
* text-align:center; 纯蛋疼勿在意
*/
#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;
}
/*
* 分别瓶子三部分,很简单的 o(* ̄▽ ̄*)ゞ
*/
#mid {
width:99%;
position:fixed;
z-index:-999;
}
/*
* 此处效果同 #juice,z-index:-999; 表示放到最底层
*/
#mid .inner {
width:92px;
height:2000px;
background:url(strohalm_mid.png) repeat-y;
}
/*
* #mid .inner 则是吸管的图片设置
*/
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
//记得在这段代码前面挂上 jQuery 库哈,忘记的童鞋拉出去切JJ一小时
$(window).scroll(function() {
//滚动条触发事件,目标则是整个窗口,即此窗口的滚动条
$("#monitor").html("scrollTop: "+$(window).scrollTop());
//在 #monitor 里面随时监视 $(window).scrollTop() 的值
if ($(window).scrollTop()<1108) $("#juice").css('top',490+815-$(window).scrollTop());
else $("#juice").css('top',$(window).scrollTop()/2900*580)
//$(window).scrollTop()<1108 则液体停止增加,并且随滚动条上拉而下移
//反之则按滚动条滚动的比例增减
//1108是液体应该停止增加的时候,$(window).scrollTop()的值
//2900是页面高度,580是窗口的部分高度
//490 815 什么的小邪才不知道是什么咧(其实是这家伙忘记了
//反正随滚动条上拉而远离窗口顶部啦
});
})
</script>
<div id="demo_menu" style="position:fixed;bottom:10px;left:10px;z-index:999;"><a style="color:#fff;" href="/">返回</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>

二. 尾记:
  总结一下,恩恩,这样子是用于大家加深对 jQuery 和设计中对视觉滴应用滴理解(其实是小邪弄得自己蛋疼然后想拉上大家一起疼),理解完之后感觉无力的还是去用插件吧 (╯_╰) (小邪表示无力+1,这样的确有点折腾人 (=_-) 的说)。嘿嘿嘿嘿嘿 o(* ̄▽ ̄*)ゞ。

演示代码打包下载

相关文章

  • 轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

    轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

    这篇文章主要帮大家轻松学习jQuery插件EasyUI,并利用EasyUI创建CRUD应用,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery基于图层模仿五星星评价功能的方法

    jQuery基于图层模仿五星星评价功能的方法

    这篇文章主要介绍了jQuery基于图层模仿五星星评价功能的方法,使用jQuery动态修改元素背景色的方法实现星评功能,需要的朋友可以参考下
    2015-05-05
  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
    2008-06-06
  • 基于hover的用法实例(推荐)

    基于hover的用法实例(推荐)

    下面小编就为大家带来一篇基于hover的用法实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JQuery对ASP.NET MVC数据进行更新删除

    JQuery对ASP.NET MVC数据进行更新删除

    这篇文章主要介绍了JQuery对ASP.NET MVC数据进行更新删除的相关资料,需要的朋友可以参考下
    2016-07-07
  • jQuery实现自定义事件的方法

    jQuery实现自定义事件的方法

    这篇文章主要介绍了jQuery实现自定义事件的方法,实例分析了jQuery自定义事件的定义与使用方法,需要的朋友可以参考下
    2015-04-04
  • 10条建议帮助你创建更好的jQuery插件

    10条建议帮助你创建更好的jQuery插件

    这篇文章主要介绍了帮助你创建更好的jQuery插件的10条建议,涉及jQuery插件设计中常用的技巧,需要的朋友可以参考下
    2015-05-05
  • JQuery遍历DOM节点的方法

    JQuery遍历DOM节点的方法

    这篇文章主要介绍了JQuery遍历DOM节点的方法,实例分析了jQuery遍历DOM节点的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 解析jquery中的ajax缓存问题

    解析jquery中的ajax缓存问题

    现在我要在浏览器里读取缓存,因为ajax请求的数据很大,请求一次就够了。但是问题来了,在FF里面,是没有ajax缓存的,也就是每次都会触发ajax请求,这点和IE不一样
    2013-12-12
  • JQuery开发的数独游戏代码

    JQuery开发的数独游戏代码

    08年的时候装上ubuntu试用了一下,发现里面自带了一个数独游戏,索性自己用jquery做了一个数独游戏。
    2010-10-10

最新评论