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

简介: 兼容:IE7以上版本及FF;(腾讯的WebQQ3.0好像也不兼容IE6,其实这样挺好的)   上图片素材先:   背景图片: 浮云图片:    ←——————————这里是有图片D~  全选就能看见了(因为背景是白的,云也是白的嘛~)……   CSS代码:        ...

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

 

目录
相关文章
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
99 8
|
2月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
52 4
|
1月前
|
JavaScript Linux iOS开发
详解如何实现自由切换Node.js版本
不同的项目中需要使用不同版本的 Node.js,有时旧项目需要旧版本,而新项目则可能依赖最新的 Node.js 版本
34 0
|
3月前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
170 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
3月前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
本文介绍了一个使用JavaScript和HTML5 Canvas API实现的贪吃蛇游戏的升级版本,该版本支持PC端和移动端,提供了丝滑的转向效果,并允许玩家通过键盘或触摸屏控制蛇的移动。代码中包含了详细的注释,解释了游戏逻辑、食物生成、得分机制以及如何响应不同的输入设备。
71 1
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
|
7月前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端界面的技术探索
【5月更文挑战第20天】Vue.js是一款渐进式JavaScript框架,擅长构建交互式前端界面。其核心特性包括响应式数据绑定、组件化开发、指令系统和虚拟DOM,简化开发并提升性能。通过Vue CLI创建项目,拆分组件,结合数据绑定和事件处理实现交互,使用Vue Router管理路由,Vuex进行状态管理,能高效构建现代Web应用。
|
2月前
|
JavaScript 算法 内存技术
如何降低node.js版本(nvm下载安装与使用)
如何降低node.js版本(nvm下载安装与使用)