基于JQuery 的消息提示框效果代码

详细内容请下载附件 附件下载
先看一下效果:

内容都集合到一个1.58KB的js文件里


复制代码 代码如下:

var returnurl = '';
var messagebox_timer;
$.fn.messagebox = function (message, url, type, delay) {
clearTimeout(messagebox_timer);
$("#msgprint").remove();
var m_body = $(this);
delay = (typeof delay == "undefined" ? 5000 : delay);
returnurl = url;
var box_style = 'position:absolute;display:none;z-index:1000;padding:10px 30px 10px 40px;';
switch (type) {
case 1: box_style += 'border:1px solid Green;color:#090;background:url(../Icons/ok.png) 10px 10px no-repeat #F1FEF2;'; break;
case 0: box_style += 'border:1px solid Red;color:#EE1010;background:url(../Icons/error.png) 10px 10px no-repeat #FDF8E8;'; break;
default: box_style += 'border:1px solid Orange;color:Orange;background:url(../Icons/warning.png) 10px 10px no-repeat #FEFDE9;'; break
}
var str = "<div id=\"msgprint\" style=\"" + box_style + "\">" + message + "</div>"; m_body.append(str);
var dom_obj = document.getElementById("msgprint");
var ext_width = $("#msgprint").width();
dom_obj.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - dom_obj.offsetHeight - $("#msgprint").height()) / 2) + "px";
dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - dom_obj.offsetWidth - $("#msgprint").width()) / 2) + "px";
$("#msgprint").fadeIn(1000, function () { messagebox_timer = setTimeout(messagebox_out, delay) });
};
function messagebox_out() {
if (returnurl == undefined || returnurl == '') { $("#msgprint").fadeOut(1000) }
if (returnurl == "back") { this.history.back(-1) } else if (returnurl != "" && returnurl != undefined) { this.location.href = returnurl }
}

引用的js文件:


复制代码 代码如下:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="Scripts/Jquery.L.Message.js" type="text/javascript"></script>

页面代码:


复制代码 代码如下:

<body>
<div id="hello" style="height: 350px;">
<ul><li><a href="javascript:$('#hello').messagebox('成功提示<br/>成功提示', 'http://localhost:5083/', 1, 20000);">成功,20秒后跳转</a></li>
<li> <a href="javascript:$('#hello').messagebox('错误提示<br/>错误提示', '', 0, 1000);">失败,1秒消失</a></li>
<li> <a href="javascript:$('body').messagebox('这是警告<br/>这是警告', 'back', 2);">警告,默认时间5秒后后退</a></li></ul></div></body>

时间: 2011-07-28

jQuery制作input提示内容(兼容IE8以上)

我们都知道HTML5的input新属性有 placeholder="",那么这个不兼容IE低版本我们只能用脚本来写了. 首先HTML新建一个input <input type="text" class="input" value="请输入搜索内容" /> 然后我们再引入相应的js库,再使用jQuery <script src="js/jquery-1.8.3.min.js"><

jquery实现通用版鼠标经过淡入淡出效果

复制代码 代码如下: <a class="jq_btn" href="#"><div></div></a> //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(

jQuery实现鼠标悬停显示提示信息窗口的方法

本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

jquery实现鼠标滑过显示提示框的方法

本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

jquery 提示信息显示后自动消失的具体实现

经常需要做让一个提示信息显示几秒然后自动消失的效果,之前是用setTimeout去实现,但是发现如果页面上有多个setTimeout就不太好.今天找到了两个很简单的方法.mark一下. 方法一: 复制代码 代码如下: $("#errormsg").html("您的信息输入错误,请重试!").show(300).delay(3000).hide(300); 方法二: 复制代码 代码如下: $("#errormsg").html("ok&q

jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

本文实例讲述了jQuery实现可兼容IE6的淡入淡出效果告警提示功能.分享给大家供大家参考,具体如下: 其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择j

jquery.validate提示错误信息位置方法

本文实例讲述了jquery.validate提示错误信息位置方法.分享给大家供大家参考,具体如下: 好长时间没有用jquery.validate.js这个插件了,忘得差不多了.唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问题,如果知道的话,很简单.以前遇到过,可是忘了,现在标记一下,将来在忘了,在回过头看看.俗话说的好,好记性不如烂笔头. 举个例子,大家就知道怎么回事了. rules: { name:{ require

基于jquery实现的文字淡入淡出效果

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

JQuery实现简单验证码提示解决方案

先看效果图: 要求:当输入框获得焦点时,自动显示验证图片. 代码如下(学习而已,仅供参考): 复制代码 代码如下: /***********************下是验证码对象*****************/ var Validation = {}; Validation.init = function(eleName,imageSrc){ this.image = imageSrc; $('#'+eleName).focusin(function(){ Validation.show(e

jQuery 淡入淡出、展开收缩菜单实现代码

效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo

jquery 淡入淡出效果的简单实现

样式: 复制代码 代码如下: <style type="text/css">      #win {              width: 98%;             position: absolute;                  display: none;          float:left;          } /*控制关闭按钮的位置*/        #close {         margin-left: 155px;         c

jquery淡入淡出效果简单实例

本文实例讲述了jquery淡入淡出效果实现方法.分享给大家供大家参考,具体如下: 之前理解有一些误区,以为淡入淡出是删除该元素,其实只是把该元素隐藏起来 和 显示出来罢了. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

jQuery 淡入/淡出效果函数用法分析

本文实例讲述了jQuery 淡入/淡出效果函数用法.分享给大家供大家参考,具体如下: jQuery Fading 方法 jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法: $(selector).fadeIn(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"

JS实现图片延迟加载并淡入淡出效果的简单方法

话不多说,直接看示例 首先是图片标记的写法 <img data-src="/images/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值不需要,直接将src属性去掉. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity:

jQuery实现新闻播报滚动及淡入淡出效果示例

本文实例讲述了jQuery实现新闻播报滚动及淡入淡出效果.分享给大家供大家参考,具体如下: 下面是上下滚动源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

javascript原生封装一个淡入淡出效果的函数测试实例代码

说到js的渐变显示与消失,多数朋友会想到JQuery里面的fadeIn().fadeOut()或fadeToggle().但如果仅仅是为了引入这样的一个效果,而去调用了庞大JQuery库?或者说我通过用原生js实现一些函数来提高自己~ 所以,我简单的研究了一下纯js代码写淡入淡出的效果. 如果出现错误,请在评论中指出,我也好自己纠正自己的错误 (一)FadeIn淡入函数 淡入淡出的效果,其实就是一个setInterval(),加上循环的DOM操作,通过改变element对象节点的透明度,即可实现

jQuery实现首页图片淡入淡出效果的方法

本文实例讲述了jQuery实现首页图片淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: <div id="carousel"> <div id="ca

基于jQuery实现最基本的淡入淡出效果实例

本文实例讲述了基于jQuery实现最基本的淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求.其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ. 一.基本目标 网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环.如下图所示: 二.制作过程 1.首先你要到JQ官网中下载一个JQ支持文

jQuery实现图片文字淡入淡出效果

本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.