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


Posted in Javascript onSeptember 26, 2011

很有意思。小邪就跟着做了一个Demo,木有用插件,只挂了jQuery。
Demo 演示页面

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

一. CSS+jQuery实现随滚动条增减汽水瓶中的液体:

话说喝汽水的那个网站是用一个瓶子的图片,分为瓶口、瓶身、吸管还有瓶底。在这些图片中瓶子内部都是透明的,所以我们可以在底下一层按 x 轴平铺液体的图片,当然记得弄好吸管,吸管则是按照 y 轴平铺。其他具体的请看代码中注释。

啊,对了,那家公司的地址在这里 - http://janploch.de/

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

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(* ̄? ̄*)?。

演示代码打包下载

Javascript 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
在模板页面的js使用办法
Apr 01 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
在Windows上安装Node.js模块的方法
Sep 25 #Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 #Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 #Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 #Javascript
最简单的js图片切换效果实现代码
Sep 24 #Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 #Javascript
也说JavaScript中String类的replace函数
Sep 22 #Javascript
You might like
Access数据库导入Mysql的方法之一
2006/10/09 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python入门教程 python入门神图一张
2018/03/05 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
综合测评自我鉴定
2013/10/08 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
公路施工安全责任书
2015/05/08 职场文书
房屋所有权证明
2015/06/19 职场文书
催款函范文
2015/06/24 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
详解Redis复制原理
2021/06/04 Redis