另类提示框_html/css_WEB-ITnose
我这里说的提示框，就是当用户将鼠标移动到需要提示的图标时，就会在这图标的位置出现一个提示框了。
咦，那这有什么好说的呢？
如果你来实现这一效果，你会怎么做呢？
初步的做法嘛，就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片，然后利用这张图片作为提示背景，里面输入指定内容呗。
恩，想法简单粗暴，那我们就来初步实现以下吧。
首先你得有两张上述说的图片，图片制作结果如下：
图一 图二
好了，图片有了，接下来，就是将这两张图片作为背景。
我的想法是，两张图片利用两个div，将图二（三角形图片）嵌套在图一（矩形方框）里，然后达到这一提示框的效果。
<!DOCTYPE html> <head> <title>tip</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> #liuTip { background:url(img/title_back.png) 0 10px no-repeat;<!--图一：内容区--> width:220px; height:112px; overflow:auto; position:absolute; display:block; } #liuTip div { background:url(img/title_arrow.png) 0 0 no-repeat;<!--图二：箭头区--> width:40px; height:11px; } </style> </head> <body> <!--提示框--> <div id="liuTip"> <div></div> </div> <!--提示框结束--> </body></html>运行代码，效果如下：
图三
这样，一个简单的提示框就出来了。
但是，大家发现没，这样子的话，内容框（图一）是恒定不变的哦。
也就是说，你每次用一个提示框，你就得去制作一张单独的内容框（图一），以符合特定的内容。
哎，尼玛，是不是烦了点，如果我想写一个适合于所有内容的提示框呢？
那我们就一起来改善改善它。
还记得大明湖畔的薇薇么，background有个repeat呢。
是不是知道了点撒。
想法：将提示框拆分成上、中、下三个区域，上下区域不变，中间区域拆分成一个片段，高度随内容区域的多少，而自动变换。
尼玛，这到底是什么意思？
见下图：
图四
图五
图六
这样你就可以利用repeat-y实现解决不必为单独的内容制作单独的body框的问题了。
但是，有木有发现，如果我将其拆分成上中下三个区域，高度随内容变大后，会很难看滴。
所以，我将其拆分成左中右三个区域，这样不管内容变多少，宽度随之改变，一样美观的。
图片见下：
图七 图八 图九
哈哈，好了，拆分后，再组装的思想，就是这样了。最后利用repeat-x就可以实现宽度随内容而变。
下面是实现代码：
<!DOCTYPE html> <head> <title>tip2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .tip { overflow:hidden; } .tipHead { height:77px; width:16px; background:url(localizerLeft.gif) no-repeat;<!--图七：头--> float:left; } .tipBody { height:77px; width:200px; background:url(localizerMid.gif) repeat-x;<!--图八：腰--> float:left; } .tipTail { height:77px; width:10px; background:url(localizerRight.gif) no-repeat;<!--图九：尾--> float:left; } </style> </head> <body> <div class="tip"> <div class="tipHead"></div> <div class="tipBody"></div> <div class="tipTail"></div> </div> </body></html>运行上述代码，结果如下：
图十
不知道你有没有看上述的代码，建议你看一看，不然讲不下去咯。。。
上述代码看过后，发现有点不爽。
提示框应该会经常用吧，那干嘛不把它封装成一个插件呢！！这样就不必每次用它，都去写一遍或者copy一下，绝对影响效率，心情啊！！！
目前用的jQuery比较多，所以这里就初步讲讲jQuery插件封装咯。
思路：
1、 提供相应属性，让操作者可以改变；如果操作者没有改变，使用默认属性。
2、 利用提供的属性，绘制出相对应的提示框。
详情见下代码：
(function ($){ var tip = function( p, ths ){ var _$ths = $(ths); var _$parent = _$ths.parent(); _$ths = _$ths.detach(); /* p合并自定义属性,默认包括以下属性设置: width 提示框内容区域的宽度,number content 提示框中的提示内容 */ p = $.extend({<br /> width: 200, content:'sample' }, p); /* Draw:绘制提示框的函数 param: ths --> 提示框this */ var Draw = function(){ var children = '<div class="tipHead"></div>' +'<div class="tipBody">'+p.content+'</div>' +'<div class="tipTail"></div>'; //将children加入到提示框中 _$ths.append( children ); //动态设置提示框的样式和内容区域的宽度 _$ths.addClass('tip').find('.tipBody').width( p.width ); _$parent.append(_$ths); };//End_Draw return (function(){ Draw(); _$parent = null; _$ths = null; })(); }; /* $.fn.tip:提示框插件，用于提示用户 Param: property --> 自定义提示框的相关信息 */ $.fn.tip = function( property ) { tip( property, this ); };//End_$.fn.timeProcess <br />})(jQuery);
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben?
Apr 04, 2025 pm 11:54 PM
GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...
Wie kann man adaptives Layout der Y-Achse-Position in Webanmerkungen implementieren?
Apr 04, 2025 pm 11:30 PM
Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...
HTML, CSS und JavaScript: Wesentliche Tools für Webentwickler
Apr 09, 2025 am 12:12 AM
HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
Wie verwendet ich CSS3 und JavaScript, um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken zu erreichen?
Apr 05, 2025 am 06:15 AM
Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...
