zoukankan      html  css  js  c++  java
  • Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

    兼容: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>
  • 相关阅读:
    我和Socket的第一次亲密接触
    JS获取浏览器高度,JS获取屏幕高度,JS获取宽屏
    GridControl默认不选中任何行样式
    C# Image和Byte[]互相转换
    导出Excel神器最终版
    Log4NET SQL配置
    Log4NET Oracle 配置
    oracle客户端配置
    pgsql环比和同比计算
    02_接管Activiti流程用户及用户组
  • 原文地址:https://www.cnblogs.com/zhuiyi/p/2028828.html
Copyright © 2011-2022 走看看