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 相关文章推荐
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
JavaScript实现分页效果
Mar 28 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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常用字符串函数小结(推荐)
2018/08/05 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
javascript简易画板开发
2020/04/12 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
幼儿园春游活动方案
2014/01/19 职场文书
2014年元旦感言
2014/03/06 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
三峡大坝导游词
2015/01/31 职场文书
担保贷款承诺书
2015/04/30 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
交通安全主题班会
2015/08/12 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python