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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
actionscript与javascript的区别
May 25 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 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
PHP学习笔记之二 php入门知识
2011/01/12 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
python连接oracle数据库实例
2014/10/17 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python实现神经网络感知器算法
2017/12/20 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python读取yaml文件的详细教程
2020/07/21 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
爱国演讲稿400字
2014/05/07 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
盲山观后感
2015/06/11 职场文书
施工现场安全管理制度
2015/08/05 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书