`

js 提示框

阅读更多
以下是js代码
// JavaScript Document
/*  
**    ==================================================================================================  
**    类名:CLASS_MSN_MESSAGE  
**    功能:提供类似MSN消息框  
**    示例:  
    ---------------------------------------------------------------------------------------------------  
  
            var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");  
                MSG.show();  
  
    ---------------------------------------------------------------------------------------------------  
**    作者:ttyp  
**    邮件:ttyp@21cn.com  
**    日期:2005-3-18  
**    ==================================================================================================  
**/  
  
  
/*  
 *    消息构造  
 */  
function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action)  
{  
    this.id     = id;  
    this.title  = title;  
    this.caption= caption;  
    this.message= message;  
    this.target = target;  
    this.action = action;  
    this.width    = width?width:200;  
    this.height = height?height:120;  
    this.timeout= 150;  
    this.speed    = 20; 
    this.step    = 1; 
    this.right    = screen.width -1;  
    this.bottom = screen.height; 
    this.left    = this.right - this.width; 
    this.top    = this.bottom - this.height; 
    this.timer    = 0; 
}  
  
/*  
 *    隐藏消息方法  
 */  
CLASS_MSN_MESSAGE.prototype.hide = function()  
{  
    if(this.onunload())      
    {  
        var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top; 
        var me  = this;  
 
        if(this.timer>0)  
        {   
            window.clearInterval(me.timer);  
        }  
 
        var fun = function()  
        {  
            var x  = me.left; 
            var y  = 0; 
            var width = me.width; 
            var height = 0; 
            if(me.offset>0) 
            { 
                height = me.offset; 
            } 
 
            y  = me.bottom - height; 
 
            if(y>=me.bottom) 
            { 
                window.clearInterval(me.timer);  
                me.Pop.hide();  
            } 
            else 
            { 
                me.offset = me.offset - me.step;  
            } 
            me.Pop.show(x,y,width,height);    
 
             
 
        }  
 
        this.timer = window.setInterval(fun,this.speed)      
    }  
}  
  
/*  
 *    消息卸载事件,可以重写  
 */  
CLASS_MSN_MESSAGE.prototype.onunload = function()  
{  
    return true;  
}  
/*  
 *    消息命令事件,要实现自己的连接,请重写它  
 *  
 */  
CLASS_MSN_MESSAGE.prototype.oncommand = function()  
{  
    window.open(this.action,this.target,'');
    this.hide();  
}  
  
/*  
 *    消息显示方法  
 */  
CLASS_MSN_MESSAGE.prototype.show = function()  
{  
    var oPopup = window.createPopup(); //IE5.5+  
  
    this.Pop = oPopup;  
  
    var w = this.width;  
    var h = this.height;  
  
    var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"  
        str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"  
        str += "<TR>"  
        str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"  
        str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"  
        str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"  
        str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"  
        str += "</TR>"  
        str += "<TR>"  
        str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"  
        str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>"  
        str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A></DIV>"  
        str += "</DIV>"  
        str += "</TD>"  
        str += "</TR>"  
        str += "</TABLE>"  
        str += "</DIV>"  
  
    oPopup.document.body.innerHTML = str;  
  
    this.offset  = 0; 
    var me  = this;  
    var fun = function()  
    {  
        var x  = me.left; 
        var y  = 0; 
        var width    = me.width; 
        var height    = me.height; 
 
 
            if(me.offset>me.height) 
            { 
                height = me.height; 
            } 
            else 
            { 
                height = me.offset; 
            } 
 
        y  = me.bottom - me.offset; 
        if(y<=me.top) 
        { 
            me.timeout--; 
            if(me.timeout==0) 
            { 
                window.clearInterval(me.timer);  
                //me.hide(); 
            } 
        } 
        else 
        { 
            me.offset = me.offset + me.step; 
        } 
        me.Pop.show(x,y,width,height);    
 
          
 
    }  
  
    this.timer = window.setInterval(fun,this.speed)      
  
     
  
    var btClose = oPopup.document.getElementById("btSysClose");  
  
    btClose.onclick = function()  
    {  
        me.hide();  
    }  
  
    var btCommand = oPopup.document.getElementById("btCommand");  
    btCommand.onclick = function()  
    {  
        me.oncommand();  
    }  
  
  
}  
/* 
** 设置速度方法 
**/ 
CLASS_MSN_MESSAGE.prototype.speed = function(s) 
{ 
    var t = 20; 
    try 
    { 
        t = praseInt(s); 
    } 
    catch(e){} 
    this.speed = t; 
} 
/* 
** 设置步长方法 
**/ 
CLASS_MSN_MESSAGE.prototype.step = function(s) 
{ 
    var t = 1; 
    try 
    { 
        t = praseInt(s); 
    } 
    catch(e){} 
    this.step = t; 
} 
  
CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom) 
{ 
    try 
    { 
        this.left        = left    !=null?left:this.right-this.width; 
        this.right        = right    !=null?right:this.left +this.width; 
        this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height; 
        this.top        = top    !=null?top:this.bottom - this.height; 
 
    } 
    catch(e) 
    {} 
} 



以下是html代码
<html>
<head>
<script src="message.js"></script>
<script>
	function fun()
	{
	    //构造对象(id号,宽,高,'标题1','标题2','内容','超链接','打开位置');
		var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");  
		MSG1.rect(null,null,null,screen.height-60);  //设置左,右,上,下距离
		MSG1.speed    = 10; //设置速度方法
		MSG1.step    = 5;   //设置步长方法 
		MSG1.show();  //显示方法
	}
</script>
</head>

<body  onLoad="fun()" >
</body>
</html>

分享到:
评论

相关推荐

    js提示框特效js提示框特效js提示框特效js提示框特效

    JavaScript提示框特效是一种常见的网页交互元素,用于向用户显示信息、警告或确认操作。在网页开发中,我们经常需要自定义这些提示框以提供更好的用户体验。传统的JavaScript提示框包括`alert()`, `prompt()`, 和 `...

    js提示框制作js文字提示框,js图片提示框

    1. **基本的JavaScript提示框:alert()** JavaScript 提供了 `alert()` 函数,用于弹出一个带有单一按钮的警告对话框,通常用于简单的信息提示。例如: ```javascript alert("这是一条文字提示信息!"); ``` 这...

    好用的漂亮提示框,js提示框

    通过自定义的JavaScript提示框,开发者可以创造出既美观又实用的交互体验,从而提高用户的满意度和产品的整体品质。在实际项目中,我们可以根据具体需求选择合适的库或框架,结合提供的API文档,快速实现个性化提示...

    非常漂亮的JS提示框

    在这个“非常漂亮的JS提示框”主题中,我们主要探讨的是如何利用JS实现一个既美观又实用的提示框,并解决在不同浏览器中,特别是IE6中的兼容性问题。 提示框是用户界面中常见的一种元素,通常用于显示警告、确认...

    鼠标放上去触发一个javascript提示框效果代码

    鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示...

    js提示框替代系统alert,自动关闭alert对话框的实现方法

    自己写了个alert提示框。因为系统alert在苹果手机微信中,提示时,顶部会显示网站地址。 同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框,并自动关闭。 效果图 css样式 /*弹出消息对话框...

    非常漂亮的仿QQ界面的JS提示框组件 javascript alert

    本篇将介绍一个仿QQ界面的JS提示框组件,它旨在提升网页应用中的提示信息展示效果。 这个组件的核心目标是模仿QQ应用程序中的对话框样式,提供一种更加吸引人的视觉体验。在设计上,它可能包括更细腻的动画效果、可...

    js提示框美化

    总的来说,"js提示框美化"是一个提高网页UI/UX的实用工具,通过自定义的JavaScript和CSS,可以让网页中的提示信息变得更加生动有趣,提升用户对网站的整体印象。对于前端开发者来说,这是一个值得学习和掌握的技术,...

    自定义 js 提示框

    在IT行业中,自定义JavaScript提示框是一个常见的需求,特别是在网页应用和交互设计中。传统的JavaScript提供了`prompt`、`alert`和`confirm`这三种基本的提示方式,但它们的功能和样式较为有限,无法满足复杂场景下...

    js 提示框插件鼠标滑过提示文章内容信息

    JavaScript提示框插件是一种常用的网页交互元素,它能够在鼠标悬停在特定元素上时,以弹出的小窗口显示额外的信息。这种插件通常被称为“tooltips”,它可以帮助用户了解页面上某些元素的具体含义或详细内容,而无需...

    一个自动缩放的JS提示框

    标题中的“一个自动缩放的JS提示框”指的是在网页中使用JavaScript实现的一种动态调整大小的提示窗口。这种提示框可以根据需要显示的信息量自动改变自身的尺寸,为用户提供更好的阅读体验。这种技术通常用于显示警告...

    js提示框(模仿QQ控件的提示消息框)

    总的来说,这个JS提示框项目展示了如何利用JavaScript和CSS来实现一个功能齐全、风格独特的提示消息框,并且考虑到了老版本浏览器的兼容性问题,对于学习和实践中提升前端开发技能具有一定的参考价值。

    js提示框

    标签 "源码" 和 "工具" 暗示我们将深入到实际代码层面,并可能涉及到一个具体的JavaScript提示框实现或工具。"ymPrompt-4.0-B-20090207" 这个文件名可能是某种自定义提示框插件或库的版本,其中“ym”可能是开发者...

    js提示框-转载+++ js 乱码+++自动提交+滚动图片加载+箭头导航(转载)

    综合这些知识点,我们可以构建一个简单的示例项目,包含自定义的JavaScript提示框、字符编码处理、自动提交表单、图片懒加载和箭头导航的幻灯片功能。这些技术都是前端开发中常见的,对于提升用户体验和网页性能有着...

    仿QQ界面的JS提示框组件

    通过以上步骤,我们可以创建一个仿QQ界面的JS提示框组件。此组件不仅可以用于显示简单的消息,还可以实现复杂的对话框功能,如确认操作、输入框等。在实际项目中,可以根据需求进行进一步的定制和扩展,以满足更多...

    超酷js提示框悬浮框

    title的格式 title="header=[...] body=[...]" 直接打开就可以看到效果,很炫的哦

    仿QQ界面的JS提示框组件.zip

    本项目“仿QQ界面的JS提示框组件”是一个专门针对前端开发的代码资源,旨在提供一种模拟QQ应用程序中常见提示框效果的JavaScript解决方案。这种组件能够提升用户体验,使用户界面更加友好和直观。 首先,我们要理解...

    非常漂亮的仿QQ界面的JS提示框组件说明

    《仿QQ界面的JS提示框组件详解》 在网页交互设计中,提示框是一种不可或缺的元素,用于向用户展示信息、确认操作或提供反馈。本文将详细介绍一款仿QQ界面的JS提示框组件,该组件以其美观的界面和灵活的参数设置,为...

Global site tag (gtag.js) - Google Analytics