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提示信息功能,通过简单的JavaScript代码实现了动态创建、定位、显示和自动隐藏提示信息,提高了用户体验。在实际项目中,可以根据需求调整样式和时间,以适应不同的应用场景。
JQuery实现浮动DIV提示信息并自动隐藏的功能涉及了JavaScript编程、DOM操作以及CSS样式的应用。以下是一系列详细的知识点说明: 1. jQuery基础:jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档...
在网页设计中,浮动层是一种常见的交互元素,它可以在用户移动鼠标时跟随鼠标的位置进行动态显示,常用于提示信息、广告展示或者下拉菜单等。本篇将详细讲解如何使用jQuery来实现这样的功能。 首先,我们需要理解...
在网页设计中,浮动窗口(通常是一个具有特定功能的`div`元素)是一种常见的交互元素,它能够悬浮在页面内容之上,提供信息提示、广告展示或者用户交互等功能。jQuery作为一种强大的JavaScript库,为创建这样的浮动...
**jQuery浮动层插件详解** 在网页开发中,浮动层(通常称为弹窗或对话框)是一种常见的交互设计元素,用于展示重要的信息、提示、表单或者任何需要用户注意的内容。jQuery作为一款广泛使用的JavaScript库,提供了...
2. **HTML结构**:创建一个按钮元素和一个用于显示提示信息的浮动物体(div)。为按钮添加一个唯一的ID,以便在jQuery中引用。 ```html 悬停我 <div id="tooltip" style="display:none;">这是浮动提示框内容</div> `...
本教程将详细讲解如何利用jQuery实现一个精美的浮动层效果,这种效果通常用于创建弹出窗口、提示框或信息提示。 首先,我们需要理解浮动层的基本概念。浮动层,也称为浮动对话框或浮窗,是一种在网页上显示临时信息...
总之,jQuery插件实现DIV浮动在页面固定位置是通过监听滚动事件,动态计算并设置元素位置来达到目的的。这种技术在网页设计中广泛应用,可以增强用户体验,使关键信息始终保持可见。对于开发者来说,理解和掌握这种...
当鼠标离开"hover-div"时,"info-div"会自动隐藏。 这个功能实现了对不同屏幕尺寸的自适应,因为坐标计算是基于元素的相对位置,而不是固定的像素值。因此,无论屏幕大小如何变化,信息div总能正确显示。 通过以上...
浮动提示特效通常用于向用户显示额外的信息或指导,比如鼠标悬停在某个元素上时弹出的提示,或者在页面加载时自动显示的提示。这种特效有助于提升用户体验,因为它以不侵入的方式传递信息,同时不会打断用户的浏览...
"jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框,通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...
Jquery左右浮动层常用于网站的收藏、分享、购物车、提示信息等场景,提升用户的操作便捷性和网站的互动性。 总结来说,Jquery左右浮动层是利用Jquery和CSS实现的一种交互设计,它能够以平滑的动画效果从页面两侧...
在网页开发中,经常需要实现一些层(Div)在浏览器中居中显示的效果,这种效果在弹窗对话框或提示信息中尤为常见。要实现这样的效果,我们可以通过使用jQuery这个快速、小巧且功能丰富的JavaScript库来完成。本篇...
本教程将深入探讨如何使用jQuery库来创建一个适用于图片和链接的浮动提示信息框。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画以及Ajax交互。在jQuery中实现浮动提示框,可以...
在这些浮动层中,jQuery用于控制div的显示、隐藏、定位以及动画效果。 2. **浮动层原理** 浮动层,也称为弹出框或对话框,是一种在网页上显示额外信息或功能的交互方式。它们通常出现在主页面内容之上,不影响其他...
在网页设计中,浮动层(Float Layer)是一种常见的交互元素,用于向用户显示临时通知、提示信息或广告。本教程将详细介绍如何使用jQuery库来创建一个位于页面右下角的浮动提示框,并实现向上滑动的动画效果,类似于...
在网页设计中,"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术,主要用于增强用户体验,提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一...
3. **编写jQuery代码**:利用jQuery来控制小人的显示、隐藏以及跟随鼠标移动的效果。例如: ```javascript $(document).ready(function() { var $guide = $('#floating-guide'); $guide.hide(); // 鼠标悬停...
本项目“基于jQuery的简单实用的浮动提示信息框插件atooltip.zip”旨在为网页提供一种轻量级、易于使用的提示信息框解决方案。下面我们将深入探讨这个插件的核心概念、实现方式以及如何在实际项目中应用。 1. **...