<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
#out_div{
margin:0 auto;
}
.divI{
height:1500px;
width:auto;
position:relative;
}
.left{
width:128px;
border-right:1px solid #999;
position:relative;
top:100px;
height:1400px;
float:left;
}
.div1{
background-color:#FFFFCC;
}
.div2{
background-color:#9999FF;
}
.div3{
background-color:#FFCCFF;
}
.div4{
background-color:#CCCCFF;
}
.div5{
background-color:#CC99FF;
}
.ball{
top:-1px;
left:50px;
position:absolute;
width:165px;
height:230px;
}
.ball1{
background:url(ball1.png) no-repeat 0 0;
background-color: #960;
}
.ball2{
background:url(ball1.png) no-repeat -222px 0;
background-color:#036;
}
.ball3{
background:url(ball1.png) no-repeat -446px 0;
background-color:#093;
}
.ball4{
background:url(ball1.png) no-repeat -670px 0;
background-color:#F60;
}
.ball5{
background:url(ball1.png) no-repeat -892px 0;
background-color:#60C;
}
.divII{
width:70%;
height:1400px;
border:1px solid blue;
float:left;
margin-left:10%;
margin-top:50px;
}
</style>
</head>
<body>
<div id="out_div">
<div class="divI div1">
<div class="left">
<div class="ball ball1"></div>
</div>
<div class="divII">
内容
</div>
</div>
<div class="divI div2">
<div class="left">
<div class="ball ball2">
</div>
</div>
<div class="divII">
内容
</div>
</div>
<div class="divI div3">
<div class="left">
<div class="ball ball3"></div>
</div>
<div class="divII">
内容
</div>
</div>
<div class="divI div4">
<div class="left">
<div class="ball ball4"></div>
</div>
<div class="divII">
内容
</div>
</div>
<div class="divI div5">
<div class="left">
<div class="ball ball5"></div>
</div>
<div class="divII">
内容
</div>
</div>
</div>
<script>
/*
* 仿一淘-根据scrollTop改变背景效果；
* ie8，ff，opera测试可用，其他浏览器未测；
* **********made by keimon*************
* ***********2013-01-16**************
*/
$(window).scroll(function(){
var t = $(document).scrollTop();
var len = $('.divI').length;
for(var i=0; i<len; i++){
var num1 = i*1500+50; //1500是每个背景层的高度，可用根据自己的需求改变（css），
var num2 = (i+1)*1500; //可以，用$('divI').height()来获得实际的页面高度；
var j = i+1
var b = '.ball'+j;
if(t>num1 && t<num2){
$(b).css('position','fixed');
}else{
$(b).css('position','absolute');
}
}
})
</script>
</body>
</html>
相关推荐
团建游戏----气球大赛
5. **技术挑战**: 在气球内实施背投技术面临诸多挑战，如气球的膨胀与收缩可能影响投影效果，环境光线对画面的影响，以及如何保证设备在高空中的稳定运行等。 6. **文件格式PDF**: 压缩包内的“气球内背投视频传播...
"气球砰砰砰"这个游戏可能涉及物理引擎（模拟气球弹跳）、碰撞检测（气球与障碍物的交互）、用户输入处理（玩家控制气球的动作）以及简单的图形渲染（气球和背景的显示）等技术。 【.rar与.zip文件】 RAR和ZIP都是...
"行业文档-设计装置-气球起重机教具.zip" 这个标题表明，这是一个关于工业设计或教育领域内的文档集合，具体聚焦于一种名为“气球起重机”的教学工具。这个教具可能是为了帮助学生或工程师理解基本的机械原理、力的...
html表白文件--包含心形气球多种表白html表白文件--包含心形气球多种表白html表白文件--包含心形气球多种表白html表白文件--包含心形气球多种表白html表白文件--包含心形气球多种表白html表白文件--包含心形气球多种...
"商务报告PPT模板-红黄蓝彩色-气球PPT模板.pptx"是一个以红黄蓝三原色为主调，采用气球元素的PPT模板，适用于多种场合，如金融理财、幼儿园课件、年会盛典以及家居装修等领域的展示。以下将详细解析如何利用此模板...
总结来说，实现"单击打开关闭js仿window气球提示效果"涉及到JavaScript的事件处理、CSS的样式设计和HTML的结构构建。通过结合这三个核心技术，我们可以创建出具有交互性和美观性的气球提示功能，提升用户体验。在...
【标题】"行业分类-设备装置-仿气球贴纸及其制作方法.zip"涉及的核心知识点主要集中在仿气球贴纸的制造工艺上，这是一项创新的技术应用，旨在为装饰、广告或其他用途提供一种类似气球视觉效果的贴纸。这种贴纸在设计...
开发者可能需要使用到游戏引擎如Unity或Unreal Engine的物理引擎来实现逼真的气球飘动和碰撞效果。同时，为了保证游戏性能，可能还需要优化渲染和计算过程。 除此之外，网络游戏往往还包括多人在线对战或合作模式。...
在这个特定的例子中，我们有一个名为“行业分类-设备装置-仿气球贴纸.zip”的压缩包，这通常意味着它包含了与某个特定行业分类，特别是设备装置领域相关的资料。在本案例中，这个压缩包可能包含了关于仿气球贴纸的...
这个文件定义了热气球及其背景的样式，包括颜色、大小、位置以及动画效果。例如，CSS可以设置热气球的初始位置、透明度变化，以及它们在页面上的运动轨迹。CSS3的`@keyframes`规则可以用来创建动画，定义热气球从一...
转盘可以是物理性的转动界面，也可以是虚拟的动画效果，玩家通过某种方式（如点击、摇动设备等）启动转盘，转盘上的不同区域对应不同的结果，如气球的种类、数量、特殊效果等。这种机制增加了游戏的刺激性和惊喜感，...
这些图片可能包括游戏界面、角色设计、背景、特效以及可能的广告素材等。在开发HTML5游戏时，图像资源是非常关键的一部分，它们决定了游戏的视觉表现和玩家的沉浸感。开发者需要合理优化图像大小以确保游戏在不同...
《气球悬浮式观光平台结构》是一份详细探讨空中观光平台设计的专业文档，它涉及到的主要知识点包括但不限于以下几个方面： 1. **气球悬浮原理**：气球观光平台的核心技术是利用浮力原理，即气体（通常为氦气）的...
在IT领域，PPT（PowerPoint）是一种...综上所述，"缤纷气球PPT背景图片"压缩包是为提升PPT演示文稿视觉吸引力而准备的素材，通过合理应用，可以制作出生动、有趣的演示文稿，吸引观众的注意力并增强信息传递的效果。
2. **Web Audio API**：用于处理音频，为游戏添加背景音乐和音效提供了便利。 3. **Web Storage**：提供本地存储机制，允许游戏保存玩家进度或得分。 4. **Web Workers**：在后台线程运行脚本，提高游戏性能，避免...
《气球网络中的位置知晓“幽灵”简况》是一份深入探讨网络游戏技术与机制的资料，主要聚焦于“气球网络”这一独特的环境下的位置知晓系统，以及其中的“幽灵”现象。在网络游戏领域，尤其是在多人在线游戏或者大型...
通过切换背景图位置显示不同气球 气球宽高 118* 168 位置间距X:140 Y: 176 坐标的确定:横坐标0 1 2 3 纵坐标 0 1 2（4*3的精灵图），横坐标通过 下标%4 得出 纵坐标通过 parseInt(下标/4)得出 初始化设置 ：初始...
标题中的“2张彩色爱心气球PPT背景图片.zip”表明这是一个包含两张以彩色爱心气球为主题的PPT背景图像的压缩文件。这类素材通常被设计师、演讲者或教育工作者用来制作具有吸引力的演示文稿，以提升观众的兴趣和注意...