JavaScript 悬浮窗口实现代码

效果如图：

代码如下：

悬浮窗口示例

window.onscroll = function () {
var div = document.getElementById("divSuspended");
div.style.top = document.body.scrollTop;
}
window.onresize = window.onscroll;
function init(){
var df = document.createDocumentFragment();
for(var i=0;i

Try scrolling this window.

这是悬浮窗口

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

赞 (0)

相关推荐

  • JS控制弹出悬浮窗口(一览画面)的实例代码

    JS控制弹出悬浮窗口(一览画面)的实例代码

    在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu

  • js实现悬浮窗效果(支持拖动)

    js实现悬浮窗效果(支持拖动)

    经常可以看到大部分的官网有右侧悬浮在线客服.今天来写写! 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js悬浮窗代码(支持拖动)</title> <meta name="descriptio

  • 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"&g

  • JS百度地图搜索悬浮窗功能

    JS百度地图搜索悬浮窗功能

    这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的.文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular 效果图: 代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <me

  • js实现可以点击收缩或张开的悬浮窗

    js实现可以点击收缩或张开的悬浮窗

    本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下 说明:点击"+"按钮,悬浮窗收缩/展开 思路 1.在html中定义一个div块,定一个id:一个按钮,点击时用. 2.写一个js,包含收缩以及展开的函数:为按钮添加点击事件. 3.想要让悬浮窗好看点,可设置对应的参数. 步骤 html <div id="area"> <div id="small_menu"> <ul> <li>

  • js点击出现悬浮窗效果不使用JQuery插件

    JQuery有很多这样的插件,但是我们公司不用jquery,没有插件,所以我就试着自己写,我也不知道别人是怎么写的,纯粹是按着自己的想法来的. 直接上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript">

  • JavaScript 悬浮窗口实现代码

    JavaScript 悬浮窗口实现代码

    效果如图:代码如下: 悬浮窗口示例 window.onscroll = function () { var div = document.getElementById("divSuspended"); div.style.top = document.body.scrollTop; } window.onresize = window.onscroll; function init(){ var df = document.createDocumentFragment(); for(v

  • 实例代码详解javascript实现窗口抖动及qq窗口抖动

    窗口抖动效果在很多地方都有应用,例如网易的登陆窗口就有这样的效果,当登陆失败的时候就会出现抖动效果,这不但有动感,而且让人感觉新颖,下面是一段这样的代码实例,和大家分享一下. 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/&qu

  • javascript弹出窗口实现代码

    javascript弹出窗口实现代码

    很多网页都实现了弹出窗口,使用方面,特别的人性化,本文就大家介绍javascript实现弹出窗口特效,具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>弹出窗口</title> <script src="js/jquery-1.11.1.js"></sc

  • JavaScript实现上下浮动的窗口效果代码

    JavaScript实现上下浮动的窗口效果代码

    本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win

  • 使用electron实现百度网盘悬浮窗口功能的示例代码

    相关依赖 里面使用了vuex vue vue-route storeJs storeJs 用来持久化vuex状态 展示 介绍说明 没有使用electron内置的-webkit-app-region: drag 因为使用他那个有很多问题 比如事件无法使用 右键无法使用 以及不能使用手型等! 安装 安装的时候没有截图 所以就参考下我其他的文章吧 storeJs 安装 npm install storejs 准备写代码 配置路由文件 export default new Router({ routes

  • Android视频悬浮窗口实现的示例代码

    前言 本文例子实现了点击显示悬浮窗口,同时窗口可播放视频,拖动位置,点击关闭及返回 APP 页面,通过例子来讲述悬浮窗口实现原理及细节处理,效果图如下所示: 悬浮窗口.gif 原理 WindowManager 对 View 视图进行添加.移除.更新处理: WindowManager.LayoutParams 对窗口参数进行一系列设置. 实现 首先,需要添加相对应悬浮窗权限: <uses-permission android:name="android.permission.SYSTEM_A

  • 为调试JavaScript添加输出窗口的代码

    为调试JavaScript添加输出窗口的代码

    虽然不是很复杂的实现,但每次都要这样就会很麻烦,所以我写了一小段脚本,用来自动生成这个输出窗口. 代码 复制代码 代码如下: window.Babu = {}; Babu.Debugging = {}; Babu.Debugging.writeLine = function(format, arg1, arg2) { var console = Babu.Debugging._getConsole(); if (console.get_visible()) { var msg = format;

  • 使用BootStrap实现悬浮窗口的效果

    使用BootStrap实现悬浮窗口的效果

    经常玩社群网站的想必对这样一种场景很常见,如图: 鼠标停在某个超链接上,然后会出现一个悬浮框,内容时该账号的一些信息. 刚好最近在做一些前端的东东,涉及到类似的需求.--鼠标悬停,出现一个悬浮框,悬浮框描述一些具体信息.之前其实参考了网上的一篇文章,但觉得有点儿过于复杂..而发现:神奇的 bootstrap就自带了这个功能.所以就用bootstrap的popover插件做了,效果还不错.虽然挺简单的,但还是纪念一下-- 定义一个超链接,同时需注意相应页面的必要的css和js必须引入: Html代

随机推荐