【免费】wz_tooltip.js资源-CSDN文库

共3个文件

js：3个

4星 · 超过85%的资源需积分: 0 160 浏览量 2008-12-29 15:43:11 上传评论 2 收藏 15KB ZIP 举报

《JavaScript实现动态提示框：wz_tooltip.js及关联文件解析》在网页设计与开发中，用户交互体验是一项至关重要的任务。"wz_tooltip.js"是一个JavaScript库，它旨在提升用户体验，通过创建一种称为“tooltip”的功能，使用户在鼠标悬停时能够看到额外的图片和超文本内容。这种动态提示框技术极大地丰富了网站的信息展示方式，同时保持了界面的简洁性。我们来深入了解`wz_tooltip.js`的核心功能。这个脚本主要是用来生成鼠标跟随的提示信息，当用户将鼠标指针悬停在特定元素上时，会显示一个包含附加信息的小窗口。这个窗口可以包含图片、链接或者其他HTML内容，为用户提供更丰富的上下文信息，而无需离开当前页面或点击任何按钮。这种设计不仅提高了信息的可读性，还减少了用户操作的复杂性。除了`wz_tooltip.js`之外，压缩包中还有两个其他文件：`tip_centerwindow.js`和`tip_followscroll.js`。这两个文件是`wz_tooltip.js`的扩展和补充，为提示框的功能提供了更多选项。 `tip_centerwindow.js`的作用是将提示框定位在浏览器窗口的中心，这样无论用户如何滚动页面，提示框始终位于屏幕中央，确保用户始终保持关注。这种设计尤其适用于那些需要用户重点关注的信息，如警告、确认对话框等。另一方面，`tip_followscroll.js`使得提示框能跟随用户的滚动行为。当用户在页面上滚动时，提示框会保持与鼠标位置相对固定，这样用户在浏览长页面时仍能轻松查看提示内容。这种功能在处理大量数据或者需要逐项解释的列表时非常有用，因为它允许用户在不失去上下文的情况下浏览信息。在实际应用中，开发者可以通过调整这些脚本的参数来定制提示框的外观和行为，比如改变其大小、颜色、字体、动画效果等，以适应不同的设计风格和需求。此外，`wz_tooltip.js`还支持自定义内容生成，允许开发者通过JavaScript动态生成提示信息，从而实现更灵活的信息展示。 `wz_tooltip.js`及其关联文件提供了一套强大的工具，用于创建富有交互性和用户体验友好的动态提示框。它们不仅提升了网页的信息传达效率，也增加了用户与网页的互动性，是现代网页开发中不可或缺的一部分。掌握并熟练运用这些技术，可以帮助开发者创造出更具吸引力和实用性的网站。

资源详情

资源评论

资源推荐

收起资源包目录

wz_tooltip.zip （3个子文件）

wz_tooltip.js 36KB

tip_centerwindow.js 3KB

tip_followscroll.js 3KB

/* This notice must be untouched at all times. Copyright (c) 2002-2008 Walter Zorn. All rights reserved. wz_tooltip.js v. 5.3 The latest version is available at http://www.walterzorn.com or http://www.devira.com or http://www.walterzorn.de Created 1.12.2002 by Walter Zorn (Web: http://www.walterzorn.com ) Last modified: 7.10.2008 Easy-to-use cross-browser tooltips. Just include the script at the beginning of the <body> section, and invoke Tip('Tooltip text') to show and UnTip() to hide the tooltip, from the desired HTML eventhandlers. Example: <a onmouseover="Tip('Some text')" onmouseout="UnTip()" href="index.htm">My home page</a> No container DIV required. By default, width and height of tooltips are automatically adapted to content. Is even capable of dynamically converting arbitrary HTML elements to tooltips by calling TagToTip('ID_of_HTML_element_to_be_converted') instead of Tip(), which means you can put important, search-engine-relevant stuff into tooltips. Appearance & behaviour of tooltips can be individually configured via commands passed to Tip() or TagToTip(). Tab Width: 4 LICENSE: LGPL This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License (LGPL) as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For more details on the GNU Lesser General Public License, see http://www.gnu.org/copyleft/lesser.html */ var config = new Object(); //=================== GLOBAL TOOLTIP CONFIGURATION =========================// var tt_Debug = true // false or true - recommended: false once you release your page to the public var tt_Enabled = true // Allows to (temporarily) suppress tooltips, e.g. by providing the user with a button that sets this global variable to false var TagsToTip = true // false or true - if true, HTML elements to be converted to tooltips via TagToTip() are automatically hidden; // if false, you should hide those HTML elements yourself // For each of the following config variables there exists a command, which is // just the variablename in uppercase, to be passed to Tip() or TagToTip() to // configure tooltips individually. Individual commands override global // configuration. Order of commands is arbitrary. // Example: onmouseover="Tip('Tooltip text', LEFT, true, BGCOLOR, '#FF9900', FADEIN, 400)" config. Above = false // false or true - tooltip above mousepointer config. BgColor = '#E2E7FF' // Background colour (HTML colour value, in quotes) config. BgImg = '' // Path to background image, none if empty string '' config. BorderColor = '#003099' config. BorderStyle = 'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed' config. BorderWidth = 1 config. CenterMouse = false // false or true - center the tip horizontally below (or above) the mousepointer config. ClickClose = false // false or true - close tooltip if the user clicks somewhere config. ClickSticky = false // false or true - make tooltip sticky if user left-clicks on the hovered element while the tooltip is active config. CloseBtn = false // false or true - closebutton in titlebar config. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colours config. CloseBtnText = ' X ' // Close button text (may also be an image tag) config. CopyContent = true // When converting a HTML element to a tooltip, copy only the element's content, rather than converting the element by its own config. Delay = 400 // Time span in ms until tooltip shows up config. Duration = 0 // Time span in ms after which the tooltip disappears; 0 for infinite duration, < 0 for delay in ms _after_ the onmouseout until the tooltip disappears config. Exclusive = false // false or true - no other tooltip can appear until the current one has actively been closed config. FadeIn = 100 // Fade-in duration in ms, e.g. 400; 0 for no animation config. FadeOut = 100 config. FadeInterval = 30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother but causes more CPU-load config. Fix = null // Fixated position, two modes. Mode 1: x- an y-coordinates in brackets, e.g. [210, 480]. Mode 2: Show tooltip at a position related to an HTML element: [ID of HTML element, x-offset, y-offset from HTML element], e.g. ['SomeID', 10, 30]. Value null (default) for no fixated positioning. config. FollowMouse = true // false or true - tooltip follows the mouse config. FontColor = '#000044' config. FontFace = 'Verdana,Geneva,sans-serif' config. FontSize = '8pt' // E.g. '9pt' or '12px' - unit is mandatory config. FontWeight = 'normal' // 'normal' or 'bold'; config. Height = 0 // Tooltip height; 0 for automatic adaption to tooltip content, < 0 (e.g. -100) for a maximum for automatic adaption config. JumpHorz = false // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundary config. JumpVert = true // false or true - jump vertically " config. Left = false // false or true - tooltip on the left of the mouse config. OffsetX = 14 // Horizontal offset of left-top corner from mousepointer config. OffsetY = 8 // Vertical offset config. Opacity = 100 // Integer between 0 and 100 - opacity of tooltip in percent config. Padding = 3 // Spacing between border and content config. Shadow = false // false or true config. ShadowColor = '#C0C0C0' config. ShadowWidth = 5 config. Sticky = false // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseout config. TextAlign = 'left' // 'left', 'right' or 'justify' config. Title = '' // Default title text applied to all tips (no default title: empty string '') config. TitleAlign = 'left' // 'left' or 'right' - text alignment inside the title bar config. TitleBgColor = '' // If empty string '', BorderColor will be used config. TitleFontColor = '#FFFFFF' // Color of title text - if '', BgColor (of tooltip body) will be used config. TitleFontFace = '' // If '' use FontFace (boldified) config. TitleFontSize = '' // If '' use FontSize config. TitlePadding = 2 config. Width = 0 // Tooltip width; 0 for automatic adaption to tooltip content; < -1 (e.g. -240) for a maximum width for that automatic adaption; // -1: tooltip width confined to the width required for the titlebar //======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============// //===================== PUBLIC =============================================// function Tip() { tt_Tip(arguments, null); } function TagToTip() { var t2t = tt_GetElt(arguments[0]); if(t2t) tt_Tip(arguments, t2t); } function UnTip() { tt_OpReHref(); if(tt_aV[DURATION] < 0 && (tt_iState & 0x2)) tt_tDurt.Timer("tt_HideInit()", -tt_aV[DURATION], true); else if(!(tt_aV[STICKY] && (tt_iState & 0x2))) tt_HideInit(); } //================== PUBLIC PLUGIN API =====================================// // Extension eventhandlers currently supported: // OnLoadConfig, OnCreateContentString, OnSubDivsCreated, OnShow, OnMoveBefore, // OnMoveAfter, OnHideInit, OnHide, OnKill var tt_aElt = new Array(10), // Container DIV, outer title & body DIVs, inner title & body TDs, closebutton SPAN, shadow DIVs, and IFRAME to cover windowed elements in IE tt_aV = new Array(), // Caches and enumerates config data for currently active tooltip tt_sContent, // Inner tooltip text or HTML tt_t2t, tt_t2tDad, // Tag converted to tip, and its DOM parent element tt_scrlX = 0, tt_scrlY = 0, tt_musX, tt_musY, tt_over, tt_x, tt_y, tt_w, tt_h; // Position, width and height of currently displayed tooltip function tt_Extension(