`
huanyq2008
  • 浏览: 171725 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

信息提示框

阅读更多

 

消息提示封装js

 

/**
    ----------------------------------------------------------------------------
var pop = new popWindow({id:"netSpeed",width:250,height:150,caption:"网速提示",title:"加载当前页面用时",message:time+"ms"});
	pop.show();
    ----------------------------------------------------------------------------
/**//*  
*    消息构造  
*/  
var popWindow = function(arg){
    this.id     = (typeof arg.id == "undefined") ?"popTemp":arg.id;
    this.title  = (typeof arg.title == "undefined") ?"内容如下":arg.title;
    this.caption= (typeof arg.caption == "undefined") ?"消息提示":arg.caption;
    this.message= (typeof arg.message == "undefined") ?" ":arg.message;
    this.target = (typeof arg.target == "undefined") ?" ":arg.target;
    this.action = (typeof arg.action == "undefined") ?" ":arg.action;
    this.width    = (typeof arg.width == "undefined") ?250:arg.width;
    this.height = (typeof arg.height == "undefined") ?150:arg.height;
    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;
    this.stayTimer= 0;
    this.pause    = false;
    this.close    = false;
    this.stay = (typeof arg.stay == "undefined") ?3:arg.stay;//默认设置为三秒
    this.autoHide    = (typeof arg.autoHide == "undefined") ?true:arg.autoHide;
}
/**//*  
*    隐藏消息方法  
*/
popWindow.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);  
        }
        if(this.stayTimer>0){
            window.clearTimeout(me.stayTimer);
        }
        var fun = function(){
            if(me.pause==false||me.close){
                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);
    }
}

/**
*    消息卸载事件
*/  
popWindow.prototype.onunload = function() {
    return true;
}
/**
*    消息命令事件
*/  
popWindow.prototype.oncommand = function(){
    //this.close = true;
    this.hide();
	window.open("http://wangsuceshi.hao352.com/");
}
/**
*    消息显示方法  
*/  
popWindow.prototype.show = function(){
    var oPopup = window.createPopup(); //IE5.5+  
    this.Pop = oPopup;
    var w = this.width;
    var h = this.height;
    var str = "<div style=\"width:250px;height:145px;margin:0 auto;background:url(images/box_bg.gif) no-repeat;padding:4px 0 0 4px;position:relative;\">"
   				 + " 	<div  style=\"background:url(images/box_top.png) no-repeat;height:23px;;\">"
				 + "      <h2 style=\"padding-left:16px;width:100px;float:left\"></h2>"
				 + "      <div title=关闭 style=\"background-image:url(images/box_close1.png); width:23px; height:22px; cursor:pointer; float:right; z-index:1; margin-right:7px;\"  id=\"btSysClose\"onmouseover=\"this.style.backgroundImage='url(images/box_close2.png)';\"  onmouseout=\"this.style.backgroundImage='url(images/box_close1.png)';\"></div>"
				 + "   </div>"
				 + "   <div style=\"width:240px;\">"
				 + "      <div class=\"notic\">"
				 + "        <div class=\"text\" style=\"padding:6px 5px 6px 5px;text-indent:2em;line-height:138%;height:90px;color:#000000;cursor:pointer;overflow-y:auto;font-size:12px;\">"
				 + this.title + ":"
				 + "<a href=\"#none\" id='btCommand' style=\"text-decoration: none; color:#000;\" onmouseover=\"this.style.color='#f60'\" onmouseout=\"this.style.color='#000'\">"
				 + this.message
				 + "</a>"
				 + "        </div>"
				 + "      </div>"
				 + "   </div>"
				 + "</div>";
    oPopup.document.body.innerHTML = str;
    this.offset  = 0;
    var me  = this; 
    oPopup.document.body.onmouseover = function(){me.pause=true;}
    oPopup.document.body.onmouseout = function(){me.pause=false;}
    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){
			window.clearInterval(me.timer);
    		if(me.autoHide){
    			me.stayTimer = window.setTimeout(function(){me.hide()},me.stay*1000);
    		}
        } 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.close = true;
        me.hide();  
    }
    var btCommand = oPopup.document.getElementById("btCommand");
    btCommand.onclick = function(){
        me.oncommand();
    }
}
/**
** 设置速度方法 
**/ 
popWindow.prototype.speed = function(s){ 
    var t = 20; 
    try {
        t = praseInt(s);
    } catch(e){} 
    this.speed = t; 
}
/**
** 设置步长方法 
**/ 
popWindow.prototype.step = function(s){ 
    var t = 1;
    try {
        t = praseInt(s);
    } catch(e){}
    this.step = t;
}
  
popWindow.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){}
}

function showMsg(time){
	var pop = new popWindow({id:"netSpeed"+time,width:250,height:150,caption:"网速提示",title:"加载当前页面用时",message:time+"ms",autoHide:true,stay:4});
	pop.rect(null,null,null,screen.height-50);
	pop.speed    = 10;
	pop.step    = 5;
	pop.show();
}
/**
var pop = new popWindow({id:"netSpeed",width:250,height:150,caption:"网速提示",title:"加载当前页面用时",message:"1ms"});
pop.rect(null,null,null,screen.height-50); 
pop.speed    = 10; 
pop.step    = 5; 
pop.show();
*/
/**
var pop2 = new popWindow({id:"netSpeed",width:250,height:150,caption:"网速提示",title:"加载当前页面用时",message:"2ms"}); 
pop2.rect(100,null,null,screen.height); 
pop2.show();  
*/

 

分享到:
评论

相关推荐

    web端信息提示框

    在前端开发中,用户界面的交互体验至关重要,而信息提示框是用户与系统进行交流的重要方式之一。"web端信息提示框"是一个自定义的前端组件,它允许开发者根据项目需求自由配置提示框的外观和功能,以提供更加个性化...

    Cesium气泡信息提示框

    Cesium气泡信息提示框,在地图上点击一个点图标,弹出一个信息提示框,可以跟随图表一起移动。

    JS+css实现仿QQ空间信息提示框

    在JavaScript和CSS的世界里,创建一个仿QQ空间信息提示框是一项常见的前端开发任务。QQ空间信息提示框的设计通常包括动态效果、自定义样式以及交互功能,使得用户在使用时能够获得更加直观和友好的体验。下面我们将...

    qml自定义信息提示框

    在QML(Qt Quick)中,自定义信息提示框是一种常见的需求,特别是在开发用户界面时。QML提供了一种灵活的方式来构建动态且响应式的UI,而自定义消息提示框可以帮助我们实现更加个性化和功能丰富的用户体验。 首先,...

    vb仿qq的右下角信息提示框源码 vb提示框

    在VB(Visual Basic)编程中,创建一个类似QQ右下角的信息提示框可以极大地提升应用程序的用户体验。这种提示框通常被称为气泡提示或者托盘提示,它能够在不干扰用户主界面的情况下,提供必要的信息提示。下面我们将...

    VB 编制 信息提示框

    在VB(Visual Basic)编程中,创建一个信息提示框是一个常见的任务,用于向用户显示简短的通知、警告或询问信息。通常,VB的信息提示框功能是通过`MsgBox`函数来实现的,它允许开发者自定义消息内容、按钮、图标等...

    Unity实现通用的信息提示框

    Unity实现通用的信息提示框 本文将详细介绍如何在Unity中实现通用的信息提示框,通过示例代码来介绍该实现过程的每一个步骤,旨在为读者提供一个可靠的参考。 1. 创建信息提示框 首先,我们需要创建一个信息提示...

    易语言模块信息提示框控件(Tip).rar

    易语言模块信息提示框控件(Tip).rar 易语言模块信息提示框控件(Tip).rar 易语言模块信息提示框控件(Tip).rar 易语言模块信息提示框控件(Tip).rar 易语言模块信息提示框控件(Tip).rar 易语言模块信息提示框控件...

    易语言源码信息提示框控件(Tip).7z

    本压缩包“易语言源码信息提示框控件(Tip).7z”包含了一个易语言编写的源代码,用于实现信息提示框控件的功能,即Tip控件。 信息提示框控件在软件开发中广泛使用,通常用来向用户显示短暂或临时性的信息。在易语言...

    类似QQ 信息提示框

    在IT行业中,创建类似QQ的信息提示框是一项常见的需求,特别是在开发桌面应用时,为了提供用户友好的交互体验,这类提示框能及时提醒用户接收的消息或通知。本项目着重讲解如何实现一个模仿QQ风格的信息提示框,并...

    vb做的功能强大的信息提示框

    在VB(Visual Basic)编程环境中,创建一个功能强大的信息提示框是提高用户交互体验的重要手段。这个“vb做的功能强大的信息提示框”项目提供了一种定制化的解决方案,它超越了标准的MsgBox函数,提供了更丰富的功能...

    javascript透明信息提示框

    ### JavaScript 实现透明信息提示框(Tooltip)技术详解 #### 一、引言 在现代网页设计中,信息提示框(Tooltip)作为一种重要的交互元素,能够有效提升用户体验。特别是那些带有透明效果的信息提示框,更是增加了...

    相当于QQ信息提示框弹出小窗体信息

    "相当于QQ信息提示框弹出小窗体信息"这个标题所描述的功能,是我们在许多应用程序中常见的一种用户通知机制,尤其是即时通讯软件如QQ。这种设计允许程序在不打断用户当前操作的情况下,向用户展示重要的或者即时的...

    MSN一样的信息提示框

    "MSN一样的信息提示框"是针对这一需求的解决方案,它旨在为开发者提供一种方法,使他们的应用能够展现出类似QQ或MSN即时通讯软件中的消息提示效果。这种提示框通常具有吸引人的动画效果、丰富的自定义选项以及良好的...

    鼠标移上去显示信息提示框

    "鼠标移上去显示信息提示框"的功能,就是这种体验的一种体现。它允许用户在将鼠标悬停在某个元素上时,出现一个提示框来显示与该元素相关的附加信息。这种设计能够帮助用户快速理解页面元素的具体含义或功能,而无需...

    arcgis api for js 自定义弹出信息提示框

    在这个场景中,我们关注的是如何利用这个API来实现自定义的弹出信息提示框。弹出框在地图应用中常常用于展示详细信息,如图层特征的数据,或者提供用户交互的界面。 首先,ArcGIS API for JavaScript 提供了内置的...

    JS 动态生成一个下载详细信息提示框

    本例中的"JS 动态生成一个下载详细信息提示框"是一个典型的前端开发任务,目的是在用户将鼠标悬停在下载按钮上时,提供有关下载的详细信息,提升用户体验。以下是一些关于如何实现这个功能的关键知识点: 1. **事件...

    12款超酷HTML5信息提示框特效.zip

    在本资源"12款超酷HTML5信息提示框特效.zip"中,包含了一系列创新且吸引人的信息提示框设计,这些特效能够使网站的反馈和通知更加直观、动态,提升用户在浏览网站时的满意度。 首先,我们要理解HTML5中的“信息提示...

    jQuery点击弹出信息提示框插件.zip

    jQuery点击弹出信息提示框插件是一个非常实用的前端开发工具,主要应用于网页交互效果的增强,特别是用户操作反馈方面。这个插件基于JavaScript库jQuery,它简化了DOM操作、事件处理、动画制作等任务,使得创建动态...

    JQuery信息提示框插件 jquery.toast.js 的使用

    `jQuery.toast.js` 是一个基于 jQuery 的轻量级信息提示框插件,它提供了一种优雅的方式,用于在网页上显示各种类型的通知、提示信息或者错误消息。这个插件的设计目标是简洁易用,同时具有高度可定制性,能够适应...

Global site tag (gtag.js) - Google Analytics