Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

  1. 云栖社区>
  2. 博客>
  3. 正文

Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

布雷泽 2011-04-26 00:35:00 浏览866
展开阅读全文

兼容: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()函数;

 

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>

 

网友评论

登录后评论
0/500
评论
布雷泽
+ 关注