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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
原生JS实现不断变化的标签
May 22 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
ElementUI之Message功能拓展详解
Oct 18 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
第十一节--重载
2006/11/16 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP目录操作实例总结
2016/09/27 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Sanic框架配置操作分析
2018/07/17 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
从0开始的Python学习016异常
2019/04/08 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python 制作简单的音乐播放器
2020/11/25 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
医学生自荐信范文
2013/12/03 职场文书
社区娱乐活动方案
2014/08/21 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
Java版 单机五子棋
2022/05/04 Java/Android
利用Java连接Hadoop进行编程
2022/06/28 Java/Android