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>

赞 (0)

相关推荐

  • php仿QQ验证码的实例分析

    有需要的朋友,参考下吧. 复制代码 代码如下: <?php/** * 仿QQ验证码*///Session保存路径$sessSavePath = dirname(__FILE__)."/../data/sessions/";if(is_writeable($sessSavePath) && is_readable($sessSavePath)){ session_save_path($sessSavePath); }session_start();//获取随机字符$

  • php使用curl抓取qq空间的访客信息示例

    config.php 复制代码 代码如下: <?phpdefine('APP_DIR', dirname(__FILE__));define('COOKIE_FILE', APP_DIR . '/app.cookie.txt'); //会话记录文件define('VISITOR_CAPTURE_INTERVAL', 3); //QQ采集间隔define('VISITOR_DATA_UPLOAD_INTERVAL', '');define('THIS_TIME', time()); define(

  • QQ登录 PHP OAuth示例代码

    根据官方文档编写 复制代码 代码如下: <?php /** * 申请http://connect.opensns.qq.com/apply * 列表http://connect.opensns.qq.com/my */ session_start(); $qq_oauth_config = array( 'oauth_consumer_key'=>'*******',//APP ID 'oauth_consumer_secret'=>'******************',//APP

  • 利用JQuery制作符合Web标准的QQ弹出消息

    这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画,感觉这个自定义动画就是像flash里的形状和渐变动画一样,只要定义了开头和结尾的两个关键帧,中间的动画过程会自动完成,不用会jQuery的可去查下jQuery的帮助文档. 基本思路是这样子滴:首先弹出消息框其实就是一个div层,页面加载完了以后我们应该通过CSS把div层定位到页面右下角的下方,并且把他隐藏起来,然后当我们点击页面中的按钮的时候就触发动画函数,div层开始从下往上升,在这里我们为了增加

  • 腾讯QQ php程序员面试题目整理

    说在前面: 1.以下题目,除了编程任务外其他都需要写在给你提供的草纸上.纸张是珍贵的地球资源,请节约使用.编程任务在有相应的环境时,会要求上机书写,实在没有条件,就只能写在草纸上了. 2.时间: 基础任务+进阶任务+设计任务 ＝ 90分钟 编程任务 ＝ 60分钟 基础任务: 1.请列举你能想到的UNIX信号,并说明信号用途. 2.请列举.你能想到的所有的字符串查找算法,并加注释简单说明. 3.有一个IP地址(192.168.0.1),请写出其32位无符号整数形式. 4.写出.你能想到的所有HTT

  • 利用webqq协议使用python登录qq发消息源码参考

    开源的,地址在https://github.com/atupal/webqq 等有时间了写一个完整的cli qq客户端. 使用方法:python login_qq.py即可 复制代码 代码如下: import urllib2 import httplib2 import re import random from encryption import QQmd5 import cookielib import requests import getpass import time import j

  • php获取qq用户昵称和在线状态（实例分析）

    QQ通过返回不同的图片,来表示在线或离线,图标也随之变换,既然图片不同,那么,返回的HTTP头信息中的Content-Length 也一定不同,而且,彩色图片一定会比同样子的暗色图片要大,于是,找出某个样式的彩色与暗色图片的中间值,就能达到通过判断头部返回长度的方法来获取QQ在线状态以下是代码 复制代码 代码如下: <?phpfunction get_qq_status($uin){ error_reporting(0); $f=file_get_contents('http://wpa.qq.

  • WebQQ最新登陆协议的用法

    本文实例讲述了WebQQ最新登陆协议的用法.分享给大家供大家参考.具体分析如下: WebQQ协议更新后,原登陆算法等信息改变,导致很多朋友无法正常登陆,本站发布了一些与WebQQ最新登陆协议相关的文章,有因为未发布Demo,一些朋友会加Q来问,是否适应最新的WebQQ,本文就做一个小的Demo来供大家测试. 声明: 1.本Demo做的比较简单,未对密码及验证码等对错做验证,只是做登陆演示. 2.QQ是个比较隐私的东西,那么请您用测试号登陆本软件,先小人后君子吧. 本站与最新WebQQ登陆协议相关

  • jQuery制作仿腾讯web qq用户体验桌面

    jQuery制作仿腾讯web qq用户体验桌面

    jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上.jQuery用户体验设计,web qq桌面十分动感酷炫. 查看演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

    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: u

  • 去除链接元素的虚线框 兼容IE7、IE6、FF

    推荐下面的代码 复制代码 代码如下: a {outline: none; /* for Forefox */ } a {star:expression(this.onFocus=this.blur()); /* for Ie*/ } 下面的代码比较麻烦 我们采用htc文件的办法来解决这个问题.首页将以下代码保存为link.htc文件. 复制代码 代码如下: <public:attach event="onfocus" onevent="hscfsy()"/&g

  • javascript 浏览器类型和版本号检测代码(兼容多浏览器)

    javascript检测浏览器类型和版本号(兼容各浏览器) var uA = navigator.userAgent; var browserType = "unknown"; if (uA.indexOf("Opera") > -1) { browserType = "Opera"; } else if (uA.indexOf("Safari") > -1) { browserType = "Safar

  • JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

    JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

  • JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

    JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

    JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过那一个效果是用jquery实现的<jQuery向上循环滚动(仿新浪微博未登录首页滚动微博显示)>,今天发现这款是js制作的好,不敢独享,希望需要的朋友喜欢哦. 效果图展示如下: 查看演示         源码下载 html代码 <div class="wp"> <ul id="slider" class=&quo

  • 基于javascript实现仿百度输入框自动匹配功能

    本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd

  • javascript高仿热血传奇游戏实现代码

    前言 游戏的第一个版本开发于14年,浏览器端使用html+css+js,服务端使用asp+php,通讯采用ajax,数据存储使用access+mySql.不过由于一些问题(当时还不会用node,用asp写复杂的逻辑真的会写吐:当时对canvas写的也少,dom渲染很容易达到性能瓶颈),已经废弃.后来用canvas重制了一版.本文写于18年. 1.开发前的准备 为什么要用Javascript来实现一款比较复杂的PC端游戏 1.js实现PC端网游是可行的.随着PC.手机硬件配置的升级和浏览器的更新换

  • 使用ViewPage+Fragment仿微信界面

    本文实例为大家分享了ViewPage+Fragment仿微信界面的具体代码,供大家参考,具体内容如下 实现效果: 左右滑动可切换界面,点击也可以实现 界面与碎片: 主界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="h

  • Android仿微信界面的导航以及右上角菜单栏效果

    下面是安卓开发仿微信界面的代码. 分为3步, 第一步是界面的编写; 第二步是导航界面; 第三步是右上角菜单栏. 开始第一步前先预览一下效果. 第一步,界面. 界面的思路是利用ViewPager+Fragment实现,所以activity_main.xml中添加一个ViewPager.顶部和底部include的顶部栏和底部栏后面再说. MainActivity的界面activity_main.xml: <?xml version="1.0" encoding="utf-8

  • react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As

随机推荐