`

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

阅读更多
/** 
* 浮动DIV定时显示提示信息,如操作成功, 失败等 
* @param string tips (提示的内容) 
* @param int height 显示的信息距离浏览器顶部的高度 
* @param int time 显示的时间(按秒算), time > 0 
* @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击</a> 
* @sample 上面代码表示点击后显示操作成功3秒钟, 距离顶部100px 
* @copyright ZhouHr 2010-08-27 
*/ 
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 ) ); 
} 

 

分享到:
评论

相关推荐

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

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

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

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

    Jquery插件之浮动窗口(DIV)

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

    jquery 浮动层插件

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

    jQuery精美浮动层效果

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

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

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

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

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

    jquery div 弹出框

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

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

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

    Jquery左右浮动层

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

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

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

    四个div优美实用的浮动层

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

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

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

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

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

    jquery浮动层,跳转到页面指定链接

    综上所述,创建一个jQuery浮动层并实现页面跳转涉及以下几个关键点: 1. 引入jQuery库。 2. 使用CSS设置浮动层的位置和样式。 3. 利用jQuery选择器和事件处理函数实现链接跳转功能。 4. 可能参考相关的技术博客或...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...

    原生js div网页右下角浮动提示层可缩小和关闭浮动提示层

    在网页设计中,创建一个可自定义大小并能关闭的浮动提示层是非常常见的需求,尤其在提供用户反馈、系统消息或者帮助信息时。这个“原生js div网页右下角浮动提示层可缩小和关闭浮动提示层”的项目,显然旨在解决这一...

    jQuery CSS图片浮动层效果.zip

    浮动层,也称为漂浮窗口或弹出层,是在网页上创建的一种可移动、可隐藏的元素,通常用于展示广告、提示信息或者用户操作指南等。在jQuery中,我们可以通过选择器选取元素,然后利用CSS进行样式控制,配合JavaScript...

Global site tag (gtag.js) - Google Analytics