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 Function对象扩展之延时执行函数
Jul 06 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
原生js实现日期联动
Jan 12 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
Bootstrap响应式表格详解
May 23 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
在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中常用的转义函数
2014/02/28 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python super的使用方法及实例详解
2019/09/25 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
机电专业毕业生求职信
2013/10/27 职场文书
大型会议策划方案
2014/05/17 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Python 中面向接口编程
2022/05/20 Python