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应用之禁止抓屏、复制、打印
Feb 21 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
JavaScript缓动动画函数的封装方法
Nov 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
numpy数组拼接简单示例
2017/12/15 Python
Python File readlines() 使用方法
2018/03/19 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
劳资协议书范本
2014/04/23 职场文书
开网店计划分析
2019/07/30 职场文书