另类提示框_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);
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
＆gt; gt;的目的是什麼 元素？
Mar 21, 2025 pm 12:34 PM
本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati
＆lt; datalist＆gt;的目的是什麼。 元素？
Mar 21, 2025 pm 12:33 PM
本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159
＆lt; meter＆gt;的目的是什麼。 元素？
Mar 21, 2025 pm 12:35 PM
本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前
視口元標籤是什麼？為什麼對響應式設計很重要？
Mar 20, 2025 pm 05:56 PM
本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。
HTML容易為初學者學習嗎？
Apr 07, 2025 am 12:11 AM
HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。
＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？
Mar 20, 2025 pm 06:05 PM
本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
HTML中起始標籤的示例是什麼？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
