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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
jquery分割字符串的方法
Jun 24 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
js动态获取时间的方法分析
Aug 02 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
Jupyter加载文件的实现方法
2020/04/14 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
服务理念标语
2014/06/18 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
努力工作保证书
2015/02/28 职场文书
2015年班干部工作总结
2015/04/29 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL