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 相关文章推荐
jquery中文乱码的多种解决方法
Jun 21 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
javascript实现下雨效果
Mar 27 Javascript
详解vue-router基本使用
Apr 18 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
移动端手指操控左右滑动的菜单
Sep 08 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php mysql数据库操作分页类
2008/06/04 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python编写猜数字小游戏
2019/10/06 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
什么是Python变量作用域
2020/06/03 Python
python破解同事的压缩包密码
2020/10/14 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
日期和时间问题
2015/01/04 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
奥巴马当选演讲稿
2014/09/10 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js