js 随滚动条移动的弹出层

最新推荐文章于 2018-06-09 09:24:21 发布

czhaozhi3758

最新推荐文章于 2018-06-09 09:24:21 发布

阅读量212

点赞数

分类专栏： js特效文章标签： Microsoft HTML

js特效专栏收录该内容

11 篇文章 0 订阅

订阅专栏


<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>

czhaozhi3758

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 随滚动条移动的弹出层

[code="html"] div#topbar{ position:absolute; border-right: #455690 3px solid; border-top: #455690 3px solid; border-left: #455690 3px solid; border-bottom: #455690 3px solid;...
复制链接

扫一扫