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 相关文章推荐
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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函数method_exists()与is_callable()的区别
2013/06/21 PHP
浅谈php命令行用法
2015/02/04 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
Python 面试中 8 个必考问题
2018/11/16 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
企业厂长岗位职责
2013/12/17 职场文书
关于青春的演讲稿
2014/05/05 职场文书
党员承诺书格式
2014/05/21 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
刑事和解协议书范本
2014/11/19 职场文书
网络营销计划
2015/01/17 职场文书
会议欢迎词范文
2015/01/27 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
《法国号》教学反思
2016/02/22 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs