`
jiulingchen
  • 浏览: 42683 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

实现仿WebQQ界面的“浮云”完全JS代码

CSSJavaScript腾讯浏览器XHTML 
阅读更多

兼容: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>

 

分享到：
| 51个jQuery插件介绍和应用实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics