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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
详解Vuex管理登录状态
2017/11/13 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python冒泡排序简单实现方法
2015/07/09 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
django 微信网页授权登陆的实现
2019/07/30 Python
python连接mongodb集群方法详解
2020/02/13 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
反邪教宣传工作方案
2014/05/07 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
大学生求职意向书
2015/05/11 职场文书
告知书格式
2015/07/01 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android