另类提示框_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);
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Quel est un exemple d'une balise de départ dans HTML?
Apr 06, 2025 am 12:04 AM
Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?
Apr 04, 2025 pm 11:30 PM
L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?
Apr 05, 2025 am 06:15 AM
Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...
