背景图片:
浮云图片: ←——————————这里是有图片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>
理解: .hScroll 是为了让浏览器的滚动条隐藏；其他一看就明白咋回事，我也不废话了；
body里的代码：
复制代码 代码如下:
<body onload="StartMove()">
<div class="cloud" id="moveCloud">
</div>
</body>
理解：页面加载的时候调用StarMove()函数；
Javascript代码：
复制代码 代码如下:
<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>
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。