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 DOM 添加事件
Feb 14 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
vue地区选择组件教程详解
May 04 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
推荐dojo学习笔记
2007/03/24 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
js实现日历
2020/11/07 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
教师节横幅标语
2014/10/08 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
员工自我评价范文
2015/03/11 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
Python学习开发之图形用户界面详解
2021/08/23 Python