QQ右下角浮动窗口

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
</head>
<body>
<h1>我的qq浮动</h1>
<style>
#qq_box{width:223px;height:133px;background:#ccc;position:fixed;right:0px;bottom:10px;
background:url(http://nanke.jdjlnk.com/images/qq_xf.gif);}
#qq_close{width:40px; height:20px;position:absolute;right:0;top:0;cursor:pointer;}
#qq_box_l{width:40px; height:30px;position:absolute;right:50px;bottom:0;cursor:pointer;}
#qq_box_r{width:40px;height:30px;position:absolute;right:0;bottom:0;cursor:pointer;}
</style>
<div id="qq_box" style="display: block;">
<a id="qq_close"></a><a href="http://put.zoosnet.net/LR/Chatpre.aspx?id=PUT16019242&lng=cn" target="_blank" id="qq_box_l"></a><a id="qq_box_r"></a>
</div>
<script>
function domReady(fn){
if(document.addEventListener){
document.addEventListener(‘DOMContentLoaded‘,function(){fn && fn();},false);
}else{
var oS=document.createElement(‘script‘);oS.defer=‘1‘;oS.src=‘‘;
var oHead=document.getElementsByTagName(‘head‘)[0];oHead.appendChild(oS);
oS.onreadystatechange=function(){if(oS.readyState==‘complete‘){fn && fn();}}
}
};
domReady(function(){
(function(){
var qq_box = document.getElementById("qq_box");
var qq_close = document.getElementById("qq_close");
var qq_box_l = document.getElementById("qq_box_l");
var qq_box_r = document.getElementById("qq_box_r");
var qq_timer=null;
qq_timer=setInterval(function(){qq_box.style.display=‘block‘;},2000);
qq_close.onclick=close_fn;
qq_box_r.onclick=close_fn;
function close_fn(){clearInterval(qq_timer);qq_box.style.display=‘none‘;
qq_timer=setInterval(function(){qq_box.style.display=‘block‘;},10000);
}
})();
});
</script>
</body>
</html>

----------------------------

gif图片:

时间: 2024-11-09 02:16:39

QQ右下角浮动窗口的相关文章

JQuery实现页面右下角浮动新闻之参考示例和实现代码

有些讨厌JQuery,但工作中总有项目会需要使用它.这次,有个网站首页右下角要做浮动层,在网上找了几个例子,试着实现,总是出错.最后,选择了一个简单的参考示例.为避免忘记,在这里做些记录. 参考示例链接:http://www.17sucai.com/preview/1/2013-05-05/右下角浮动提示弹出框/demo.html 代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

简单的浮动窗口

简单的浮动代码,纯js代码,但不符合w3c标准,在有些HTML规范下不可行, 例如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 具体原因不清楚,待大神告知. 完整代码如下(字母为背景测试): <html> <head> <me

(转)JS浮动窗口(随浏览器滚动而滚动)

原文:http://hi.baidu.com/aiyayaztt/item/4201c55a6b729dced2e10c79 JS浮动窗口(随浏览器滚动而滚动) 往往用于一些联系方式,互动平台模块,随着浏览器的滚动而滚动. <div id="AdLayer"> <p>窗口中的内容</p> </div> 放在<body>下面(页面最上面) JS代码 window.onload=function(){ var n=0;//top值

Android - 点击可以转动的自定义右下角浮动FABImageButton按钮

因为项目需要一个右下角浮动的圆形的按钮,顺便增加了一个用户友好体验,点击按钮后开始转动,再次点击后停止转动,如图: 实现方式: 首先添加一个FABImageButton.java的类文件 package com.example.test; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.Resources; import android.conte

半透明信息显示浮动窗口的实现

快乐鹦鹉 原文 半透明信息显示浮动窗口的实现    实现目的 在一些画图软件中,经常需要向用户展示鼠标移动到的位置的对象的一些参数信息.此时,完成一个交互性友好的信息显示界面就相当的重要了.因为一个软件的好坏,在用户的眼中,第一感觉甚至是第一重要的就是视觉效果和可操作性.当然,软件本身的稳定性和效率也很重要.特别对于产品性的软件,在用户展示时,一个优秀的界面效果可以大大加深软件在用户心里的印象分.        功能简介 本功能是作者根据自身软件在用户实际使用过程中对交互性的更高要求而开发的.浮

Delphi 悬浮窗口、浮动窗口的实现

源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=806089 需要一个这样的窗体:a:没有标题栏; b:可以改变大小; c:不在任务栏上显示图标; d:如果不是主窗体,它的最小化不受主窗体的限制; e:在最顶端显示 处理:a:不在任务栏出现的,只要设置窗体的属性为ToolWindow就可以了.b:要想使窗体脱离主窗体的限制,必须修改它的ParentWnd,使

Android浮动窗口的实现

1.浮动窗口的实现原理 看到上图的那个小Android图标了吧,它不会被其他组建遮挡,也可以响应用户的点击和拖动事件,它的显示和消失由WindowManager直接管理,它就是Android浮动窗口.Android浮动窗口的实现主要是靠WindowManager这个类.通过WindowManager类的addView(),updateViewLayout(),removeView()这几个方法,我们可以直接在Window中添加,更新,移除View. 2.浮动窗口实现的具体步骤 1)既然浮动窗口的

android 浮动窗口学习笔记及个人理解(仿360手机助手)

非常感谢原文作者 http://blog.csdn.net/guolin_blog/article/details/8689140 经自己理解 程序运行界面如下图: 1.程序入口界面 2.小浮动窗口 3.大浮动窗口 由上图可看出,可以看出我们基本需要: 1.一个主Activity 2.小浮动窗口view界面 3.大浮动窗口view界面 对于浮动窗口的管理我们还需要 4.一个Service(在后台监控管理浮动窗口的状态) 5.窗口管理类(创建/消除浮动窗口) 代码: package com.ww.

极简的css浮动窗口

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="vi