搜尋
首頁web前端js教程基于jquery实现漂亮的动态信息提示效果_jquery

简单,漂亮,动画效果,用户体验好!
曾祥展

这个效果是在页面头部出现的,出现一下会自动隐藏,上面有x那个提示就要手动关闭一下,其他的都是自动隐藏的!

温馨提示:基于jquery 1.6.2 版本!

复制代码 代码如下:







调用方式:
复制代码 代码如下:




jquery版:
复制代码 代码如下:

/*!
* jQuery JavaScript SysMsg v1.0
* http://zengxiangzhan.cnblogs.com/
* jQuery.sysmsg.js
* Copyright 2011, 曾祥展
* Date: 2011-8-1 20:00 2011 -2210
*/
if (!window.ZENG) var ZENG = {};
ZENG.add = function(d, f) {
var j;
if ($.isFunction(f.init)) {
j = f.init;
delete f.init;
$.extend(true, j.prototype, f);
this[d] = j
} else this[d] = f
};
ZENG.add("SysMsg", function() {
function d(u, D, v) {
D || (D = "success");
v = v || D == "error";
if (o) {
h.push(function() {
d(u, D)
});
f()
} else {
m.html(u);
i.removeClass().addClass(D).show().animate({
top: 0
}, 200, function() {
v || j()
});
o = 1
}
}
function f() {
i.animate({
top: "-50px"
}, 200, function() {
i.hide();
o = 0;
h.length && h.shift()()
})
}
function j() {
setTimeout(function() {
f()
}, 2E3)
}
var o, h = [],
i = $("#message-dock"),
m = i.find("#message-text");
$(".dismiss", "#message-dock").live("click", function(u) {
f();
u.preventDefault()
});
return {
show: d
}
}());

美观样式
复制代码 代码如下:

.group {
display: block;
}
.group:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.group {
min-height: 1%;
}
* html .group {
height: 1%;
}
html, body, div,p{
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
vertical-align: baseline;
}
body {
color: #444444;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 75%;
line-height: 1;
}
#message-dock {
background-color: #164673;
color: #FFFFFF;
line-height: 1.75em;
padding: 10px;
position: fixed;
top: -60px;
width: 100%;
z-index: 9999;
}
#message-dock a {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
#message-dock p {
border-radius: 5px 5px 5px 5px;
float: left;
padding: 5px 6px;
}
#message-dock .dismiss {
background: url("msg.png") repeat scroll -67px -180px #A12A2A;
border-radius: 0 5px 5px 0;
display: none;
float: left;
height: 21px;
padding-left: 10px;
text-indent: -999999px;
width: 20px;
cursor: pointer;
}
.sprite {
background: url("msg.png") no-repeat scroll 0 0 transparent;
display: inline-block;
vertical-align: top;
}
#message-sleeve {
margin: 0 auto;
max-width: 1200px;
min-width: 1000px;
}
.fixed #message-sleeve {
width: 1000px;
}
#message-text {
float: left;
font-size: 1.16667em;
padding: 0 10px 0 0;
}
.success p {
background-color: #7AA13D;
}
.alert p {
background-color: #FFF095;
color: #333333;
}
.alert a {
color: #333333 !important;
}
.error p {
background-color: #A12A2A;
padding-right: 0 !important;
}
.error #message-text {
padding-right: 0;
}
.error .dismiss {
display: block !important;
}
.error .message-icon, .alert .message-icon {
background-position: 0 -249px;
}
.message-icon {
background-position: -21px -249px;
float: left;
height: 21px;
margin-right: 6px;
position: relative;
width: 21px;
}

附件:

曾祥展


完毕!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何使用HTML、CSS和jQuery创建一个带有动态效果的搜索框如何使用HTML、CSS和jQuery创建一个带有动态效果的搜索框Oct 25, 2023 am 10:28 AM

如何使用HTML、CSS和jQuery创建一个带有动态效果的搜索框在现代Web开发中,一个常见的需求是创建一个带有动态效果的搜索框。这个搜索框可以实时展示搜索建议,并在用户输入时自动补全关键词。本文将详细介绍如何使用HTML、CSS和jQuery来实现一个这样的搜索框。创建HTML结构首先,我们需要创建一个基本的HTML结构。代码如下:<!DOCT

ppt动态效果是怎么做出来的ppt动态效果是怎么做出来的Mar 20, 2024 pm 12:58 PM

我们在工作的时候,经常需要用到PPT,有时候想让PPT更加好看,而不显得呆板,很多人都会给PPT加上动态效果,这样如果是在演讲的时候,大家看着你的PPT也不会枯燥,但是ppt动态效果是怎么做出来的,下面我就来给小伙伴们分享操作步骤!1.首先,我们打开电脑上的PPT,点击菜单栏上边的【插入】按钮,点击【图片】按钮,在电脑上选择一张图片,插入到PPT上边,如下图红色圈出部分所示:2.然后,在工具栏点击【动画】功能,再点击下方的自己喜欢的样式,如下图红色圈出部分所示:3.接下来,在效果选项中我们可以选

UniApp实现动态效果与动画展示的设计与开发方法UniApp实现动态效果与动画展示的设计与开发方法Jul 04, 2023 am 10:43 AM

UniApp是一款基于Vue.js开发的跨平台应用框架,可以将Vue代码转化为不同平台的原生代码,比如小程序、App和H5等。它提供了丰富的组件和插件,可以帮助开发者快速构建功能丰富的应用。本文将介绍如何使用UniApp实现动态效果与动画展示的设计与开发方法,并附上相应的代码示例。使用CSS动画UniApp支持使用CSS3的transition和animat

使用JavaScript函数实现用户交互和动态效果使用JavaScript函数实现用户交互和动态效果Nov 03, 2023 pm 07:02 PM

使用JavaScript函数实现用户交互和动态效果随着现代网页设计的发展,用户交互和动态效果成为了吸引用户眼球的关键。JavaScript作为一种常用的脚本语言,拥有强大的功能和灵活的特性,能够实现各种各样的用户交互和动态效果。本文将介绍一些常见的JavaScript函数,并给出具体的代码示例。改变元素样式(style)通过JavaScript函数能够轻松改

用Canvas技术打造引人入胜的动态效果,轻松get!用Canvas技术打造引人入胜的动态效果,轻松get!Jan 17, 2024 am 08:59 AM

轻松掌握Canvas技术,打造炫酷动态效果Canvas是HTML5中一项功能强大的绘图技术,可以实现各种炫酷的动态效果。本文将带你一步步学习Canvas的基本用法,并提供具体的代码示例,让你轻松掌握这项技术。一、Canvas简介Canvas是HTML5中的一个元素,用于在网页上绘制图形、动画等内容。通过使用各种API,我们可以在Canvas上绘制图形,添加动

使用JavaScript函数实现用户界面的动态效果使用JavaScript函数实现用户界面的动态效果Nov 04, 2023 pm 05:02 PM

使用JavaScript函数实现用户界面的动态效果在现代Web开发中,JavaScript是一种非常常用的编程语言,它能为网页添加动态效果,提升用户体验。本文将介绍如何使用JavaScript函数来实现用户界面的动态效果,并提供具体的代码示例。显示/隐藏元素在许多情况下,我们希望能够根据用户的操作显示或隐藏一些元素。可以使用JavaScript函数来实现这个

JavaScript如何实现网页的动态效果?JavaScript如何实现网页的动态效果?Mar 23, 2024 pm 09:09 PM

JavaScript如何实现网页的动态效果?JavaScript是一种前端开发语言,可以让网页变得更加生动和交互。通过JavaScript,开发者可以实现网页的动态效果,比如动画、事件响应等。下面将介绍一些常见的JavaScript技巧,帮助您实现网页的动态效果。改变元素样式通过JavaScript可以改变网页元素的样式,比如改变颜色、大小、位置等。以下是一

探寻Canvas技术下绚丽视觉效果的实现方法探寻Canvas技术下绚丽视觉效果的实现方法Jan 17, 2024 am 10:32 AM

Canvas技术实现动态效果,探索绚丽视觉世界,需要具体代码示例近年来,随着互联网和移动设备的高速发展,网页设计已不再局限于传统的静态展示方式。越来越多的网页设计师开始追求动态、生动的页面效果,以吸引用户的注意力。而Canvas技术,正是实现这一目标的强大工具。本文将介绍Canvas技术的基本原理和常见的动态效果,并提供具体的代码示例供参考。Canvas是H

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。