社区
Web 开发
帖子详情
javascript然后滑出小窗口
kangkings98
2010-05-09 07:24:13
我想做一个从网页右下角滑出的小窗口,这个怎么做的?
...全文
34
2
打赏
收藏
javascript然后滑出小窗口
我想做一个从网页右下角滑出的小窗口,这个怎么做的?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
tfish2014
2010-05-09
打赏
举报
回复
效果演示:http://bbs.51js.com/thread-86050-1-1.html
tfish2014
2010-05-09
打赏
举报
回复
<!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> Float Message </title>
<base href="http://www.zcool.com.cn/images/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#msg_win{
border:1px solid #A67901;
background:#EAEAEA;
width:240px;
position:absolute;right:0;
font-size:12px;font-family:Arial;
margin:0px;
display:none;
overflow:hidden;
z-index:99;
}
#msg_win .icos{
position:absolute; top:2px;
*top:0px;right:2px;
z-index:9;
}
.icos a{
float:left;
color:#833B02;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:#fff; }
#msg_title{
background:#FECD00 url(bar_bg.gif) repeat-x 0 100%;
border-bottom:1px solid #A67901;
border-top:1px solid #FFF;
border-left:1px solid #FFF;
color:#000;height:25px;line-height:25px;
text-indent:5px;
}
#msg_content{
margin:5px;
margin-right:0;
width:230px;
height:126px;
overflow:hidden;
}
</style>
</head>
<body>
<p style="background:#eee;width:10px;height:1000px"></p>
<script>
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?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
this.win.style.filter = v;
this.win.style.opacity = x / 100;
},
show: function() {//渐显
clearInterval(this.timer2);
var me = this,fx = this.fx(0, 100, 0.1),t = 0;
this.timer2 = setInterval(function() {
t = fx();
me.setOpacity(t[0]);
if (t[1] == 0) {clearInterval(me.timer2) }
},10);
},
fx: function(a, b, c) {//缓冲计算
var cMath = Math[(a - b) > 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();
}
},10);
},
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();
},600);
};
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=document.createElement('DIV');
this.win.id="msg_win";
this.win.innerHTML='<div class="icos"><a href="javascript:void 0" title="最小化" id="msg_min">0</a><a href="javascript:void 0" title="关闭" id="msg_close">r</a></div><div id="msg_title">温馨提示</div><div id="msg_content"></div>';
document.body.appendChild(this.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);
},500);
return this;
}
};
Message.init();
Message.title.innerHTML = '时尚-型男索女潮流馆';
Message.content.innerHTML = '<a href="about:blank"><img src="http://www.zcool.com.cn/images/tmp/egfashion.gif" border=0 alt="" title="原单正品 时尚复古 唯我独尊 "></a>';
</script>
</body>
</html>
JavaScript
滑动
窗口
算法
JavaScript
滑动
窗口
算法1 思想2 代码 1 思想 在力扣上刷题时经常可以看到这样的题,求XXX的子串、子数组、子序列等等,这类题一般使用滑动
窗口
来解决。本篇文章的思路学习了bilibili的up主红桃A士。 情况一:寻找...
鼠标移动到特定模块时弹出小
窗口
,小
窗口
内可以显示图片等元素
在该代码中,我们使用了一些基本的 HTML 元素和 CSS 样式,也使用了
JavaScript
代码来处理事件。请注意:这段代码中的图片路径 “onepiece.jpg” 需要根据实际文件位置.../* 设置小
窗口
格式 */// 设置弹出
窗口
的位置。
算法——滑动
窗口
【题目】请给出n个连续元素的最大和 输入:[-3, 3, 1, -3, 2, 4, 7] n=3 输出:13 如下图所示,设定滑动
窗口
(window)大小为 3,当滑动
窗口
每次划过数组时,计算当前滑动
窗口
中元素的和,得到结果 res。 在...
js学习之滑动
窗口
【代码】js学习之滑动
窗口
。
原生 js、html 滑动
窗口
像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的,比如左边固定则滚动的时候左边不会随着滚动而看不见,右边固定则右侧一列是固定住不动的。阴影的效果是,当 table 往右边滚,则左...
Web 开发
81,091
社区成员
341,718
社区内容
发帖
与我相关
我的任务
Web 开发
Java Web 开发
复制链接
扫一扫
分享
社区描述
Java Web 开发
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章