`

JQuery 浮动DIV显示提示信息并自动隐藏

阅读更多
function showTips( tips, height, time ){
  var windowWidth  = document.documentElement.clientWidth;
  var tipsDiv = '<div class="tipsClass">' + tips + '</div>';

  $( 'body' ).append( tipsDiv );
  $( 'div.tipsClass' ).css({
      'top'       : height + 'px',
      'left'      : ( windowWidth / 2 ) - ( tips.length * 13 / 2 ) + 'px',
      'position'  : 'absolute',
      'padding'   : '3px 5px',
      'background': '#8FBC8F',
      'font-size' : 12 + 'px',
      'margin'    : '0 auto',
      'text-align': 'center',
      'width'     : 'auto',
      'color'     : '#fff',
      'opacity'   : '0.8'
  }).show();
  setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}


引自:http://www.cnblogs.com/showblog/archive/2010/08/27/1810427.html
分享到:
评论

相关推荐

    基于JQuery的浮动DIV显示提示信息并自动隐藏

    总结起来,这个基于jQuery的浮动DIV提示信息功能,通过简单的JavaScript代码实现了动态创建、定位、显示和自动隐藏提示信息,提高了用户体验。在实际项目中,可以根据需求调整样式和时间,以适应不同的应用场景。

    JQuery浮动DIV提示信息并自动隐藏的代码

    JQuery实现浮动DIV提示信息并自动隐藏的功能涉及了JavaScript编程、DOM操作以及CSS样式的应用。以下是一系列详细的知识点说明: 1. jQuery基础:jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档...

    jQuery浮动层 jQuery实现div跟着鼠标走

    在网页设计中,浮动层是一种常见的交互元素,它可以在用户移动鼠标时跟随鼠标的位置进行动态显示,常用于提示信息、广告展示或者下拉菜单等。本篇将详细讲解如何使用jQuery来实现这样的功能。 首先,我们需要理解...

    Jquery插件之浮动窗口(DIV)

    在网页设计中,浮动窗口(通常是一个具有特定功能的`div`元素)是一种常见的交互元素,它能够悬浮在页面内容之上,提供信息提示、广告展示或者用户交互等功能。jQuery作为一种强大的JavaScript库,为创建这样的浮动...

    jquery 浮动层插件

    **jQuery浮动层插件详解** 在网页开发中,浮动层(通常称为弹窗或对话框)是一种常见的交互设计元素,用于展示重要的信息、提示、表单或者任何需要用户注意的内容。jQuery作为一款广泛使用的JavaScript库,提供了...

    jquery简单的鼠标悬停按钮显示浮动提示框效果代码

    2. **HTML结构**:创建一个按钮元素和一个用于显示提示信息的浮动物体(div)。为按钮添加一个唯一的ID,以便在jQuery中引用。 ```html 悬停我 &lt;div id="tooltip" style="display:none;"&gt;这是浮动提示框内容&lt;/div&gt; `...

    jQuery精美浮动层效果

    本教程将详细讲解如何利用jQuery实现一个精美的浮动层效果,这种效果通常用于创建弹出窗口、提示框或信息提示。 首先,我们需要理解浮动层的基本概念。浮动层,也称为浮动对话框或浮窗,是一种在网页上显示临时信息...

    jQuery插件实现DIV浮动在页面固定位置中

    总之,jQuery插件实现DIV浮动在页面固定位置是通过监听滚动事件,动态计算并设置元素位置来达到目的的。这种技术在网页设计中广泛应用,可以增强用户体验,使关键信息始终保持可见。对于开发者来说,理解和掌握这种...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    当鼠标离开"hover-div"时,"info-div"会自动隐藏。 这个功能实现了对不同屏幕尺寸的自适应,因为坐标计算是基于元素的相对位置,而不是固定的像素值。因此,无论屏幕大小如何变化,信息div总能正确显示。 通过以上...

    圆角带阴影的jquery气泡浮动提示特效.rar

    浮动提示特效通常用于向用户显示额外的信息或指导,比如鼠标悬停在某个元素上时弹出的提示,或者在页面加载时自动显示的提示。这种特效有助于提升用户体验,因为它以不侵入的方式传递信息,同时不会打断用户的浏览...

    jquery div 弹出框

    "jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框,通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...

    Jquery左右浮动层

    Jquery左右浮动层常用于网站的收藏、分享、购物车、提示信息等场景,提升用户的操作便捷性和网站的互动性。 总结来说,Jquery左右浮动层是利用Jquery和CSS实现的一种交互设计,它能够以平滑的动画效果从页面两侧...

    jQuery实现的浮动层div浏览器居中显示效果

    在网页开发中,经常需要实现一些层(Div)在浏览器中居中显示的效果,这种效果在弹窗对话框或提示信息中尤为常见。要实现这样的效果,我们可以通过使用jQuery这个快速、小巧且功能丰富的JavaScript库来完成。本篇...

    jQuery实现的适用于图片、链接的浮动提示信息框

    本教程将深入探讨如何使用jQuery库来创建一个适用于图片和链接的浮动提示信息框。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画以及Ajax交互。在jQuery中实现浮动提示框,可以...

    四个div优美实用的浮动层

    在这些浮动层中,jQuery用于控制div的显示、隐藏、定位以及动画效果。 2. **浮动层原理** 浮动层,也称为弹出框或对话框,是一种在网页上显示额外信息或功能的交互方式。它们通常出现在主页面内容之上,不影响其他...

    jquery浮动层制作右下角float浮动提示框向上滑动提示

    在网页设计中,浮动层(Float Layer)是一种常见的交互元素,用于向用户显示临时通知、提示信息或广告。本教程将详细介绍如何使用jQuery库来创建一个位于页面右下角的浮动提示框,并实现向上滑动的动画效果,类似于...

    仿CSDN鼠标移上去的显示DIV浮动层

    在网页设计中,"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术,主要用于增强用户体验,提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一...

    jquery博客网站浮动小人提示步骤引导信息

    3. **编写jQuery代码**:利用jQuery来控制小人的显示、隐藏以及跟随鼠标移动的效果。例如: ```javascript $(document).ready(function() { var $guide = $('#floating-guide'); $guide.hide(); // 鼠标悬停...

    基于jQuery的简单实用的浮动提示信息框插件atooltip.zip

    本项目“基于jQuery的简单实用的浮动提示信息框插件atooltip.zip”旨在为网页提供一种轻量级、易于使用的提示信息框解决方案。下面我们将深入探讨这个插件的核心概念、实现方式以及如何在实际项目中应用。 1. **...

Global site tag (gtag.js) - Google Analytics