兼容:IE7以上版本及FF；（腾讯的WebQQ3.0好像也不兼容IE6,其实这样挺好的）
上图片素材先：
背景图片:
浮云图片:
←——————————这里是有图片D~ 全选就能看见了（因为背景是白的，云也是白的嘛~）……
CSS代码：
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background: url("Images/body_bg.jpg") repeat center 0 fixed;
}
.cloud
{
background: url("Images/cloud1.png");
height: 250px;
width: 580px;
position: absolute;
}
.hScroll
{
overflow: hidden;
}
</style>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background: url("Images/body_bg.jpg") repeat center 0 fixed;
}
.cloud
{
background: url("Images/cloud1.png");
height: 250px;
width: 580px;
position: absolute;
}
.hScroll
{
overflow: hidden;
}
</style>
理解: .hScroll 是为了让浏览器的滚动条隐藏；其他一看就明白咋回事，我也不废话了；
body里的代码：
<body onload="StartMove()">
<div class="cloud" id="moveCloud">
</div>
</body>
理解：页面加载的时候调用StarMove()函数；
<script language="javascript" type="text/javascript">
var cloud = null;
var left = 0;
document.documentElement.className = "hScroll";
function StartMove() {
cloud = document.getElementById("moveCloud");
setInterval(Move, 100);
}
function Move() {
left += 1;
cloud.style.left = left + "px";
if (left >= (screen.width)) {
left = -580;
}
}
</script>
理解：document.documentElement.className = "hScroll"; 是调用css样式中的代码，目的是为了隐藏浏览器的滚动条(废话……上面不是说过了嘛^_^|| )
首先，我们要获取“浮云”层的id，所以用到了 cloud = document.getElementById("moveCloud"); cloud是一个全局变量，上面已经定义过了，所以在这里可以直接使用(老鸟勿喷，给新鸟看的).然后再给他一个“计时器” setInterval(Move, 100); 调用100毫秒调用一次Move函数；left += 1;等价于left=left+1; 配合上面的函数（每100毫秒调用一次嘛~）使用，然后再赋值给“浮云”层原来的坐标；所以写成了cloud.style.left = left + "px" ;神马？你问我left是什么东东？他是css样式里的position的属性啊！不信你在DW里写个position冒号一下，看他出来不？
if (left >= (screen.width)) ； left = -580; 就是断判如果“浮云”移动(距离左边)的位置大于或者等于屏幕的宽度，我们就让他从头开始，把left的值设为-580；
为啥设-580?? 看CSS里面嘛，浮云的图片大小是580*250嘛，也就是他的长度是580px;所以把他设成-580是为了让它从右开始一点点显示，不然一上来就显示整张图片，多吓人啊~
废了半天话，不知道大家（和我一样菜的）看懂了没有，下面的是完整的代码，另存为.html文件试一下吧；图片自己下载，别忘了改路径！
完整代码:
<!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>
<title>背景图片移动</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background: url("Images/body_bg.jpg") repeat center 0 fixed;
}
.cloud
{
background: url("Images/cloud1.png");
height: 250px;
width: 580px;
position: absolute;
}
.hScroll
{
overflow: hidden;
}
</style>
<script language="javascript" type="text/javascript">
var cloud = null;
var left = 0;
document.documentElement.className = "hScroll";
function StartMove() {
cloud = document.getElementById("moveCloud");
setInterval(Move, 100);
}
function Move() {
left += 1;
cloud.style.left = left + "px";
if (left >= (screen.width)) {
left = -580;
}
}
</script>
</head>
<body onload="StartMove()">
<div class="cloud" id="moveCloud">
</div>
</body>
</html>
分享到：
相关推荐
【网络全部仿WebQQ界面总结】是一个集合了HTML、CSS和JavaScript技术的项目，旨在创建一个与WebQQ界面相似的用户体验。这个项目是作者长时间努力的成果，包含了多个版本的迭代，以提供全面且详尽的仿制体验。在本文...
本文将深入探讨“js仿WebQQ整合苹果菜单界面”这一主题，涉及的知识点包括JavaScript基础、前端框架Query-UI的使用、用户界面设计以及与苹果设备兼容性的实现。 首先，JavaScript是Web开发的三大核心技术之一，负责...
【标题】"仿webQQ界面 后台界面 前台界面" 提供的信息表明，这是一个项目或软件，它的设计灵感来源于WebQQ，包括后台管理界面和前台用户界面。WebQQ是腾讯公司推出的一种基于Web浏览器的即时通讯服务，允许用户在不...
在本项目中，“jQuery UI仿webqq桌面系统WebOS界面操作”是一个利用jQuery UI库创建的，模拟WebQQ桌面系统风格的Web操作系统界面。这个系统旨在提供一种类似于桌面环境的用户体验，用户可以通过浏览器进行交互，享受...
在这个项目中，JavaScript代码处理了用户点击、拖动、输入等行为，实现了聊天功能、登录验证、好友状态更新等。 4. **AJAX**：Asynchronous JavaScript and XML，虽然名字中有XML，但实际使用中更多的是JSON。AJAX...
《jQuery仿WebQQ菜单UI界面详解》 在Web开发领域，优秀的用户界面（UI）设计是吸引用户并提升用户体验的关键因素之一。WebQQ以其简洁、直观的界面设计赢得了广大用户的喜爱，因此，许多开发者尝试使用jQuery来仿制...
6. **js**：JavaScript代码文件夹，包含项目的主要逻辑和jQuery UI库。 7. **css**：CSS样式表文件夹，用于定义项目的视觉样式和布局。 这个项目不仅涉及前端开发技术，还强调了用户体验设计，是学习和实践jQuery ...
【标题】"仿webqq 源码，很炫的界面"揭示了这是一个关于WebQQ的前端项目，目的是实现一个类似QQ网页版的用户界面，且界面设计极具吸引力。WebQQ是腾讯公司推出的一种基于Web浏览器的即时通讯服务，允许用户在不安装...
主要涉及的是如何使用Javascript实现一个仿WebQQ界面的“浮云”效果，并确保该效果兼容IE7及以上版本及Firefox（FF）浏览器。 ###Javascript实现仿WebQQ界面的“浮云”效果 #### 1. 兼容性说明 首先，文件标题提到...
- `js`文件夹：包含JavaScript代码，负责实现应用的功能，如用户交互、数据处理、网络通信等。JavaScript是Web开发的核心，用于增加动态性和交互性，对于高仿WebQQ应用，它可能包含了模拟QQ功能的逻辑，如登录验证...
本源码已经实现webQQ的大部分功能 熬了几个通宵终于做好了，里面实现的webQQ的大部分功能，而且全开源，适用中高级.net开发人员研究，主要是对 XML 的操作和ajax，还用了少量的JQ可以自由增加组，加好友等 数据库在...
【标签】"仿webQQ"表明项目的核心目标是对WebQQ的界面和功能进行模拟，让用户体验到相似的在线聊天环境。"JQuery"是这个项目的核心技术，它是一个广泛使用的JavaScript库，简化了DOM操作，提供了丰富的插件和动画...
在js目录下的文件中，可能会包含处理文件夹创建、删除、重命名的JavaScript代码，以及与服务器端通信的AJAX请求。这些功能的实现，使得用户可以在界面上整理和管理他们的数据。 此外，css和images目录分别包含了...
通过以上描述，我们可以看出，这个基于jsp的仿webqq聊天系统综合运用了多种技术和框架，实现了丰富的聊天功能，为用户提供了一个接近于原版QQ的在线交流平台。无论是对于学习还是实际应用，这样的系统都具有很高的...
【标题】"仿WebQQ的桌面（木子李作品）" 涉及的主要知识点是Web桌面和WebOS技术的应用，以及开源代码分享的文化。 在IT领域，Web桌面，也称为Web操作系统，是一种通过Web浏览器访问和管理应用程序的平台。这种技术...
【标题】"仿webQQ源码 .net ajax XML jQ" 涉及的主要知识点包括：WebQQ的实现原理、.NET框架的应用、Ajax技术、XML数据处理以及jQuery库的使用。下面将对这些关键点进行详细介绍。 1. **WebQQ实现原理**：WebQQ是一...
【标签】"仿webQQ .net 聊天工具"进一步强调了这个项目的主要特点：模仿WebQQ的界面和功能，使用.NET技术实现，并且是一个聊天工具。这表明该程序可能包含了登录、好友列表、聊天窗口、消息发送与接收等核心IM功能，...
详细介绍地址:...仿webQQ2.0源码,通过flash socket与javascript进行通讯.界面使用jquery编写.详细运行效果可以在这个网址看到:http://v.youku.com/v_show/id_XMjM2NzkyODQ4.html