可关闭与最小化的右下角浮动广告代码

很多朋友喜欢带有最小化功能的代码。

可最小化和关闭的右下角浮动窗口

#msg_win{position:absolute;right:0px;display:none;overflow:hidden;z-index:99;border:1px solid #c00;background:#F9EFFC;width:240px;font-size:12px;margin:0px;}
#msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}
.icos a{float:left;color:#FFFFFF;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;}
.icos a:hover{color:#FFCC00;}
#msg_title{background:#AC19E3;border-bottom:1px solid #710B97;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#FFFFFF;height:25px;line-height:25px;text-indent:5px;font-weight:bold;}
#msg_content{margin:5px;margin-right:0;width:230px;height:126px;overflow:hidden;}

浮动窗口标题:

浮动窗口内容:欢迎提出宝贵意见,谢谢!

var Message={
set: function() {//最小化与恢复状态切换
var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复'];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display =set[2];
this.minbtn.innerHTML =set[3]
this.minbtn.title = set[4];
this.win.style.top = this.getY().top;
},
close: function() {//关闭
this.win.style.display = 'none';
window.onscroll = null;
},
setOpacity: function(x) {//设置透明度
var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
this.win.style.visibility = x 0 ? "floor": "ceil"],c = c || 0.1;
return function() {return [a += cMath((b - a) * c), a - b]}
},
getY: function() {//计算移动坐标
var d = document,b = document.body, e = document.documentElement;
var s = Math.max(b.scrollTop, e.scrollTop);
var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
var h2 = this.win.offsetHeight;
return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
},
moveTo: function(y) {//移动动画
clearInterval(this.timer);
var me = this,a = parseInt(this.win.style.top)||0;
var fx = this.fx(a, parseInt(y));
var t = 0 ;
this.timer = setInterval(function() {
t = fx();
me.win.style.top = t[0]+'px';
if (t[1] == 0) {
clearInterval(me.timer);
me.bind();
}
},6);//10 to 6
},
bind:function (){//绑定窗口滚动条与大小变化事件
var me=this,st,rt;
window.onscroll = function() {
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st = setTimeout(function() {
me.win.style.top = me.getY().top;
me.show();
},100);//600 mod 100
};
window.onresize = function (){
clearTimeout(rt);
rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
}
},
init: function() {//创建HTML
function $(id) {return document.getElementById(id)};
this.win=$('msg_win');
var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};
for (var Id in set) {this[Id] = $(set[Id])};
var me = this;
this.minbtn.onclick = function() {me.set();this.blur()};
this.closebtn.onclick = function() {me.close()};
this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
this.minbtn.innerHTML=this.char[0];
this.closebtn.innerHTML=this.char[2];
setTimeout(function() {//初始化最先位置
me.win.style.display = 'block';
me.win.style.top = me.getY().foot;
me.moveTo(me.getY().top);
},0);
return this;
}
};
Message.init();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • jQuery 右下角滑动弹出可关闭重现层完整代码

    效果图: 完整代码如下: jquery右下角滑动弹出可关闭重现层 博客园 计划 教程 *{ margin:0px; padding:0px;} #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} #jihuaslide a{ position:absolute; top

  • js右下角弹出窗口,点击可关闭效果

    body { background:#333333;} #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden;display:none; background:#FFFFFF} #winpop .title { width:100%; height:20px; line-hei

  • 右下角广告脚本之家出品(点击广告后出现关闭按钮可关闭)

    右下角广告_我们原创_jb51.net function resizeDiv() { var abc = document.getElementById("ad_6"); abc.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight-150+"px"; setTimeout(function(){resizeDiv();},50); } functio

  • js实现右下角可关闭最小化div(可用于展示推荐内容)

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm 效果图片:  完整源代码: 复制代码 代码如下: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • 可关闭与最小化的右下角浮动广告代码

    很多朋友喜欢带有最小化功能的代码. 可最小化和关闭的右下角浮动窗口 #msg_win{position:absolute;right:0px;display:none;overflow:hidden;z-index:99;border:1px solid #c00;background:#F9EFFC;width:240px;font-size:12px;margin:0px;} #msg_win .icos{position:absolute;top:2px;*top:0px;right:2p

  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • 基于javascript实现右下角浮动广告效果

    本文实例为大家分享了基于javascript实现右下角浮动广告效果,供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript&q

  • 如何制作浮动广告 JavaScript制作浮动广告代码

    如果有一定的JavaScript基础,制作浮动广告还是比较容易的.直接上代码了: 复制代码 代码如下: <!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"

  • Js右下角视频广告代码(百度视窗)

    右下角视窗 请看窗口右下角 var BD_HY_VIDEOAD={};(function(){var F={videoId:"BD_HY_VIDEOAD_"+new Date().getTime().toString().substring(5,13),bgFlashShow:0,bdLogoShow:"true",bdSmallShow:"true",bdLogo:"http://eiv.baidu.com/mapm2/0306vid

  • 又一个不错的js浮动广告代码

    var Rimifon = { "Ads" : new Object, "NewFloatAd" : function(imgUrl, strLink) { var ad = document.createElement("a"); ad.DirV = true; ad.DirH = true; ad.AutoMove = true; ad.Image = new Image; ad.Seed = Math.random(); ad.Timer

  • float ad浮动广告代码

    New Page 1 var isRight=true; var isDown=true; function init() { float(); } function float() { var top_u=parseInt(document.body.offsetHeight)-parseInt($("ad").style.height);; var top_l=0; var left_u=parseInt(document.body.offsetWidth)-parseInt($(

  • 关于在MFC中将窗口最小化到托盘实现原理及操作步骤

    步骤/方法 (一) 原理 1.最小化的原理:首先要将窗口隐藏,然后在右下角绘制图标. 2.恢复的原理:将窗口显示,再将托盘中的图片删除. (二)程序实现 1.自定义消息WM_SHOWTASK: #define WM_SHOWTASK (WM_USER +1) 2.在MFC的 ::OnSysCommand(UINT nID, LPARAM lParam) 函数体中增加一个命令响应 if(nID==SC_MINIMIZE) ToTray(); //最小化到托盘的函数 3.在消息映射中添加 ON_ME

  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

随机推荐