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 相关文章推荐
javascript引导程序
Oct 26 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python绘制七段数码管实例代码
2017/12/20 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python 串行执行和并行执行实例
2020/04/30 Python
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
2015年体育教师个人工作总结
2015/05/12 职场文书
雷锋电影观后感
2015/06/10 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
nginx结合openssl实现https的方法
2021/07/25 Servers
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers