`

js 随滚动条移动的弹出层

阅读更多
<html>
<head>
  <title>div</title>
<style type=text/css>
#topbar{
  position:absolute;
  border-right: #455690 3px solid;
  border-top: #455690 3px solid;
  border-left: #455690 3px solid;
  border-bottom: #455690 3px solid;
  background-color:#BBDDE5;
  width: 200px;
  visibility: hidden;
  z-index: 99999;
  filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=.95);
  opacity: 0.95;
}
</style>
</head>

<body>
 <div id="topbar">
  <div align="right"><a href="javascript:closebar();"><img src="/images/close.gif" border="0" /></a></div>
  <table width="100%" border="0">
    <caption><strong> 购货人信息 </strong></caption>
    <tr>
      <td>姓名</td>
      <td>1222 </td>
    </tr>
     <tr>
      <td>电子邮件</td>
      <td><a href="mailto:138@163.com">138@163.com</a> </td>
     </tr>
      <tr>
      <td>手机</td>
      <td>1213345</td>
     </tr>
    <tr>
      <td>账户余额</td>
      <td>33333元</td>
    </tr>
    <tr>
      <td>积分数</td>
      <td>54</td>
    </tr>
    <tr>
      <td>会员等级</td>
      <td>vip</td>
    </tr>
  </table>
  </div>
  
  [ <a href="javascript:staticbar();">显示购货人信息</a> ]
</body>
</html>
<script>
var persistclose = 0 // set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX       = 3 // set x offset of bar in pixels
var startY       = 3 // set y offset of bar in pixels

function iecompattest()
{
  return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

function get_cookie(Name)
{
  var search = Name + "="
  var returnvalue = "";

  if (document.cookie.length > 0)
  {
    offset = document.cookie.indexOf(search)
    if (offset != - 1)
    {
      offset += search.length;
      end = document.cookie.indexOf(";", offset);
      if (end == - 1)
      {
        end = document.cookie.length;
      }
      returnvalue = unescape(document.cookie.substring(offset, end));
    }
  }
  return returnvalue;
}

var verticalpos = "fromtop";

function closebar()
{
  if (persistclose)
  {
    document.cookie = "remainclosed=1";
  }
  document.getElementById("topbar").style.visibility = "hidden";
}

function staticbar()
{
  var ns = (navigator.appName.indexOf("Netscape") != - 1);
  var d = document;

  function ml(id)
  {
    var el = d.getElementById(id);

    if ( ! persistclose || persistclose && get_cookie("remainclosed") == "")
    {
      el.style.visibility = "visible";
    }
    if (d.layers)
    {
      el.style = el;
    }
    el.sP = function(x, y)
    {
      this.style.left = x + "px";
      this.style.top = y + "px";
    }
    ;
    el.x = startX;
    if (verticalpos == "fromtop")
    {
      el.y = startY;
    }
    else
    {
      el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
      el.y -= startY;
    }
    return el;
  }

  window.stayTopLeft = function()
  {
    if (verticalpos == "fromtop")
    {
      var pY = ns ? pageYOffset : iecompattest().scrollTop;
      ftlObj.y += (pY + startY - ftlObj.y) / 8;
    }
    else
    {
      var pY = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
      ftlObj.y += (pY - startY - ftlObj.y) / 8;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10);
  }
  ftlObj = ml("topbar");
  stayTopLeft();
}
</script>
分享到:
评论

相关推荐

    s2招聘特效制作项目

    2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 4、向上、向左滚动的信息(利用marquee跑马灯实现) 5、最热招聘(本页内链接) 6、页面打开时,弹出广告窗口 7、二级的横向菜单,...

    JavaScript网页特效范例宝典源码

    实例268 广告随滚动条漂移 418 9.4 页面动画效果 419 实例269 下雪 419 实例270 飘落的枫叶 421 实例271 下雨 423 实例272 背景的烟花效果 425 实例273 变色的圆圈 427 实例274 滚动的光环 429 实例275 星空极速飞入...

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    85:沪江英语网3图弹性广告下载 86:SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88:用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90:奥林匹克运动会焦点广告下载 91:一种选项卡样式...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    85:沪江英语网3图弹性广告下载 86:SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88:用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90:奥林匹克运动会焦点广告下载 91:一种选项卡样式...

    js当当网上书店-首页

    3、在页面的右侧有一个随滚动条上下移动的广告图片,并且图片上方有一个“关闭”按钮,单击“关闭”按钮,图片和“关闭”按钮均隐藏 4、页面中间的特效是带数字按钮的循环显示的图片广告,六张图片按规定的时间间隔...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    简单实用jQuery用于登录弹出层例子代码(带动画的弹出层) 12.综合jquery实现表格隔行换色和鼠标经过提示效果源码 7)日历插件 1.jQuery简洁漂亮点阵数字时钟显示日期的插件 2.一款简单jQuery日历选择器代码 3...

    javascript网页特效实例大全(8-12)

    实例268 广告随滚动条漂移 418 9.4 页面动画效果 419 实例269 下雪 419 实例270 飘落的枫叶 421 实例271 下雨 423 实例272 背景的烟花效果 425 实例273 变色的圆圈 427 实例274 滚动的光环 429 实例...

    javascript网页特效实例大全

    4.20 关闭页面时弹出时间警告框 85 4.21 显示在按钮上的时间 86 4.22 计算出生时间 88 4.23 计算几天后将是什么日期 92 第5章 鼠标类特效 95 5.1 让鼠标悬停来开关窗口 96 5.2 鼠标的十字星准星 96 5.3 鼠标...

    javascript常用对象梳理

    scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与 toolbar相同; resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同; width:以像素为单位指定窗口的宽度,已被...

    个人主页设计文档 网页设计 网页

    熟练使用网页设计工具Frontpage、Dreamweaver MX,能够使用Dreamweaver MX设计网页的框架,导航条,设置文字,图片,超级链接,滚动文字,弹出窗口的属性,能够使用Dreamweaver MX设计出比较复杂的网页,建立小型...

    ExtAspNet_v2.3.2_dll

    -Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...

    KODExplorer 芒果云-资源管理器

    - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...

    400个DreamWeaver插件

    mxp/不论浏览器的滚动条怎么拉,用这个插件插入的层总是保持在某个位置不动 mxp/虽然Dreamweaver不是编辑php的好工具,但是还是有这个php和mysql连接的插件供大家使用 mxp/插入php中的“include”函数 mxp/从新加载...

    IONIC 功能全演示

    [弹出层](screenshot/pop.png) ![tab](screenshot/tab.png) ![幻灯](screenshot/slide.png) ![图片水平滚动](screenshot/hscroll.png) ![毛玻璃效果](screenshot/blure.png) ![2000条数据搜索](screenshot/search....

    超实用的jQuery代码段

    1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...

    asp.net知识库

    用于弹出ModalDialog进行数据选择的控件 使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法 制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的...

Global site tag (gtag.js) - Google Analytics