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的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Python变量类型知识点总结
2019/02/18 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python数据正态性检验实现过程
2020/04/18 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
Shell编程面试题
2012/05/30 面试题
外企办公室竞聘演讲稿
2013/12/29 职场文书
商业街策划方案
2014/05/31 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL