javascript实现的固定位置悬浮窗口实例


Posted in Javascript onApril 30, 2015

本文实例讲述了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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Fixed固定位置的悬浮</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html, body { margin:0px; padding:0px; overflow:hidden; }
.b { margin:0px; padding:0px; overflow:auto; }
.line0 { line-height:20px; background-color:lightyellow;
padding:0px 15px; }
.line1 { line-height:18px; background-color:lightblue;
padding:0px 10px; }
.w { position:absolute; right:10px; bottom:10px; width:160px; 
height:240px; overflow:hidden; border:2px groove #281;
cursor:default; -moz-user-select:none; }
.t { line-height:20px; height:20px; width:160px;
overflow:hidden; background-color:#27C; color:white;
font-weight:bold; border-bottom:1px outset blue;
text-align:center; }
.winBody { height:218px; width:160px; overflow-x:hidden;
overflow-y:auto; border-top:1px inset blue;
padding:10px; text-indent:10px; background-color:white;
}
</style>
</head>
<body>
<div class="w">
<div class="t">Demo Win - Fixed</div>
<div class="winBody">Hello world</div>
<div>https://3water.com/</div>
</div>
</body>
<script>
//测试用,随机产生一定的内容
for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");
//代码如下:
new function(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
}
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
javascript常用方法汇总
Dec 02 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 #Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 #Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 #Javascript
jQuery实现冻结表格行和列
Apr 29 #Javascript
Js实现无刷新删除内容
Apr 29 #Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 #Javascript
jQuery()方法的第二个参数详解
Apr 29 #Javascript
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP微信支付开发实例
2016/06/22 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python从入门到精通(DAY 3)
2015/12/20 Python
tensorflow获取变量维度信息
2018/03/10 Python
python版飞机大战代码分享
2018/11/20 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python tkinter控件布局项目实例
2019/11/04 Python
python文件和文件夹复制函数
2020/02/07 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Django权限控制的使用
2021/01/07 Python
运动会广播稿100字
2014/09/14 职场文书
办公室主任岗位职责
2015/01/31 职场文书
辞职书格式样本
2015/02/26 职场文书
研讨会通知
2015/04/27 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Java的Object类的九种方法
2022/04/13 Java/Android
使用Django框架创建项目
2022/06/10 Python