jQuery 网页提示信息实现代码

出于需要,写了一段 jQuery 代码,来实现以下功能:

1.错误提示信息显示在浏览器中央。
2.这条信息在3秒后自动消失。

jQuery将元素绝对居中的关键代码:

 代码如下 复制代码

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

之后就可以这样使用:

 代码如下 复制代码

    $('.messages').center();

完整代码如下:

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>显示在浏览器中央的错误信息</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
    jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
      return this;
    }
    function removeMessages(){
      $('.messages').delay(3000).fadeOut(1000);
    }
    $(document).ready(function(){
      $('.messages').center();
      setTimeout(removeMessages(),1000);
    });
  </script>
  <style type="text/css">
  .messages {
    border:2px solid red;
    padding:10px;
    z-index:100;
  }
  </style>
</head>
<body>
  <div class="messages">错误信息,<br />3秒后隐藏。</div>
  <input type=button value="刷新" onclick="Javascript:self.location.reload()">
</body>
</html>

时间: 2024-10-13 18:07:50

jQuery 网页提示信息实现代码的相关文章

jquery网页返回顶部代码

示意图:如下   代码  代码如下 复制代码 <style> .top {position: fixed;display: none;width: 55px;height: 55px;right: 50px;bottom: 50px; background: #D6D6D6;color: #fff;font-size: 36px;line-height: 55px;text-align: center; cursor: pointer;border-radius: 40px;transitio

jquery网页选项卡应用代码

家居 电器 二手 我是家居的内容 欢迎您来到电器城 二手市场,产品丰富多彩

jquery实现初次打开有动画效果的网页TAB切换代码_jquery

本文实例讲述了jquery实现初次打开有动画效果的网页TAB切换代码.分享给大家供大家参考.具体如下: 这是一款初次打开有动画效果的网页TAB代码,只在第一次点击TAB菜单的时候,会显示动画,再次点击的时候就没有了,一个实用的网页选项卡效果,有需要的请下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PU

jQuery网页右侧广告跟随滚动代码分享_jquery

两种方法都分享给大家,希望对大家的学习有所启发. 方法一: <script type="text/javascript">// <![CDATA[ $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(func

jquery 鼠标悬停特效代码

首先,需加载jquery库(略过). 其次,将下面 Javascript代码加到页面的头部:  代码如下 复制代码 <script type='text/javascript'>   jQuery(document).ready(function($){   $('a').hover(function()   {   $(this).stop().animate({'left': '5px'}, 'fast');   }, function() {   $(this).stop().anima

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="content-

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="content-

三款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&qu

jQuery自定义数值抽奖活动代码_jquery

本文实例为大家分享了jquery输入数字随机抽奖特效代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" /> <script type="text/ja