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


Posted in Javascript onApril 27, 2011

上图片素材先:

背景图片:
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
浮云图片: ←——————————这里是有图片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>
Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 #Javascript
javascript中的继承实例代码
Apr 27 #Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 #Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 #Javascript
js实时监听文本框状态的方法
Apr 26 #Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 #Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 #Javascript
You might like
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
accesskey 提交
2006/06/26 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python数据可视化图实现过程详解
2020/06/12 Python
HTTP状态码详解
2021/03/18 杂记
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
党委书记岗位职责
2013/11/24 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
公证委托书大全
2014/04/04 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
法定代表人资格证明书
2015/06/18 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android