JavaScript 滚动弹出窗口

• 下载源代码文件 - 118 KB

引言

此脚本允许您使用 div 构建滚动弹出框。您可以将滚动弹出框定位在网页的角落，并选择滚动方向（例如，从左到右或从上到下）。此脚本仅在 Windows 2003 Server 上的 Internet Explorer 6.0、Firefox 1.0.7 和 Opera 8.51 上进行了测试。

工作原理

该脚本使用两个 div 构建弹出框结构，您可以使用函数 buildPopup_HtmlCode 直接将 HTML 代码放入弹出框中。

//
//  buildPopup_HtmlCode
//  build popup passing it the html code to put inside
//
function buildPopup_HtmlCode(width, height, title, htmlCode)
{
    if (width)
        popupWidth = width;
       
    if (height)
        popupHeight = height;

    if (title)
        _title = title

    document.write('<div id="postit" class="postit">');

    document.write('<div id="postit_title" class="title"><b>' + _title + 
      '<span class="spantitle"><img src="close.gif" border="0" ' +
      'title="Close" align="right" WIDTH="11" HEIGHT="11" ' + 
      'onclick="closeit()"> </b></span></div>');
    document.write('<div id="postit_content" class="content">'); 

    document.write(htmlCode);                

    document.write('</div></div>');

    getCrossObj();
}

或者使用函数 buildPopup_Frame 指定要在其中显示的框架的 URL

//
//  buildPopup_Frame
//  passing it the url of the frame to display inside
//
function buildPopup_Frame(width, height, title, framesrc)
{
    if (width)
        popupWidth = width;
       
    if (height)
        popupHeight = height;
        
    if (title)
        _title = title;
    

    document.write('<div id="postit" class="postit" >');

    document.write('<div id="postit_title" class="title"><b>' + 
      _title + ' <span class="spantitle"><img src="close.gif" border="0" ' +
      'title="Close" align="right" WIDTH="11" HEIGHT="11" ' + 
      'onclick="closeit()"> </b></span></div>');
    document.write('<div id="postit_content" class="content">'); 

    document.write('<iframe src="' + framesrc + '" width="100%" height="100%" ' + 
       'marginwidth="0" marginheight="0" ' +
       'hspace="0" vspace="0" frameborder="0" scrolling="no" ' + 
       'bordercolor="#000000"></iframe>');

    document.write('</div></div>');
    
    getCrossObj();
}

构建函数还接受 width、height 和 title 参数来定义您的弹出框。

如何使用

弹出框的布局可以使用 scrolling_popup.css 文件进行自定义。要使用此脚本，首先必须在页面的 head 部分插入以下 HTML 代码

<link REL=StyleSheet HREF="scrolling_popup.css" TYPE="text/css">
<script type="text/javascript" language="javascript" src="scrolling_popup.js"></script>

然后您需要调用两个构建函数之一

<script type="text/javascript">
    // build the popup using an iframe 
    // passing the url of the page to show
    // on it
    buildPopup_Frame(510, 481, 'This is my title', './frm.htm');
</script>

或

<script type="text/javascript">
    var html_code = 'This is an HTML code!<br>Click ' + 
       '<a href="javascript:alert(\'Hello!\');">here</a>';

    buildPopup_HtmlCode(210, 100, 'This is my title', html_code);
</script>

此时，您需要通过调用函数 ShowTheBox 来选择何时显示您的弹出框。

此函数接受五个输入参数

• only_once：一个布尔值，用于指定是否在每次访问容器页面时都显示弹出框；
• side：目标侧面，leftSide 或 rightSide；
• corner：目标角，bottomCorner 或 topCorner；
• direction：滚动方向，leftRight 或 rightLeft 或 bottopUp 或 topDown；

侧面、角和方向参数的无意义组合将不会产生任何结果。例如，ShowTheBox(true, leftSide, topCorner, rightLeft); 具有无意义的组合：在 leftSide 上使用 rightLeft 方向意味着将弹出框隐藏在页面左侧的边界之外。

//
// ShowTheBox
//
function ShowTheBox(only_once, side, corner, direction)
{
    if (side == leftSide)
    {
        if (direction == rightLeft)
            return;
        crossobj.style.left = '1px';
    }
    else
    {
        if (direction == leftRight)
            return;
        crossobj.style.right = '1px'; 
    }

    if ((corner == topCorner) && (direction == bottopUp))
        return;

    if ((corner == bottomCorner) && (direction == topDown))
        return;
        
    if ( (direction == topDown) && (corner == topCorner) )
        crossobj.style.top = '-' + popupHeight + 'px';    
    else if ( ((direction == rightLeft)||(direction == leftRight)) && 
               (corner == topCorner) )
        crossobj.style.top = '1px';
    else if (corner == bottomCorner)
        crossobj.style.bottom = '2px';

    if (only_once)
        only_once_per_browser = only_once;
  
    if (only_once_per_browser)
    {
        // verify the presence of a cookie
        if (showOrNot())
            showIt(direction);
    }
    else
        setTimeout("showIt("+ direction + ")",1030);
}

一个 ShowTheBox 调用示例

<script type="text/javascript">
    ShowTheBox(false, leftSide, bottomCorner, bottopUp);
</script>

如果 only_once 参数为 true，则脚本会检查指定 cookie 的存在。如果此 cookie 存在，则弹出框已在页面上打开，脚本将不再再次打开它。

//
// check the cookie
//
function showOrNot(direction)
{
    var showit = false;
    
    if (get_cookie('postTheBoxDisplay')=='')
    {
        showit = true;
        document.cookie = "postTheBoxDisplay=yes";
    }
    return showit;
}

结论

Zip 源代码文件包含脚本、CSS、图像和演示 HTML 页面。希望您喜欢这篇文章。

http://www.code4dotnet.com.