Home >Web Front-end >HTML Tutorial >另类提示框 - 猴子猿

另类提示框 - 猴子猿

WBOYOriginal: 2016-05-21 08:35:021237browse

我这里说的提示框，就是当用户将鼠标移动到需要提示的图标时，就会在这图标的位置出现一个提示框了。

咦，那这有什么好说的呢？

如果你来实现这一效果，你会怎么做呢？

初步的做法嘛，就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片，然后利用这张图片作为提示背景，里面输入指定内容呗。

恩，想法简单粗暴，那我们就来初步实现以下吧。

首先你得有两张上述说的图片，图片制作结果如下：

　　　　　　图一　　　　　　　　　　　　　　　图二

好了，图片有了，接下来，就是将这两张图片作为背景。

我的想法是，两张图片利用两个div，将图二（三角形图片）嵌套在图一（矩形方框）里，然后达到这一提示框的效果。

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>tip<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span><span style="color: #0000ff;">/></span>
        <span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            #liuTip </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">url(img/title_back.png) 0 10px no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="color: #888888;"><!--图一：内容区--></span>
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">220px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">112px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">block</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            #liuTip div </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">url(img/title_arrow.png) 0 0 no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="color: #888888;"><!--图二：箭头区--></span>
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">11px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #008000;"><!--</span><span style="color: #008000;">提示框</span><span style="color: #008000;">--></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="liuTip"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #008000;"><!--</span><span style="color: #008000;">提示框结束</span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

运行代码，效果如下：

　　　　　　　　图三

这样，一个简单的提示框就出来了。

但是，大家发现没，这样子的话，内容框（图一）是恒定不变的哦。

也就是说，你每次用一个提示框，你就得去制作一张单独的内容框（图一），以符合特定的内容。

哎，尼玛，是不是烦了点，如果我想写一个适合于所有内容的提示框呢？

那我们就一起来改善改善它。

还记得大明湖畔的薇薇么，background有个repeat呢。

是不是知道了点撒。

想法：将提示框拆分成上、中、下三个区域，上下区域不变，中间区域拆分成一个片段，高度随内容区域的多少，而自动变换。

尼玛，这到底是什么意思？

见下图：

　　　　　　　　图四

　　　　　　　　图五

　　　　　　　　图六

这样你就可以利用repeat-y实现解决不必为单独的内容制作单独的body框的问题了。

但是，有木有发现，如果我将其拆分成上中下三个区域，高度随内容变大后，会很难看滴。

所以，我将其拆分成左中右三个区域，这样不管内容变多少，宽度随之改变，一样美观的。

图片见下：

　　图七　　　　　　图八　　　　　　图九

哈哈，好了，拆分后，再组装的思想，就是这样了。最后利用repeat-x就可以实现宽度随内容而变。

下面是实现代码：

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>tip2<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span><span style="color: #0000ff;">/></span>
        <span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
            .tip </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                overflow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .tipHead </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">77px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">16px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">url(localizerLeft.gif) no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="color: #888888;"><!--图七：头--></span>
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .tipBody </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">77px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">url(localizerMid.gif) repeat-x</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="color: #888888;"><!--图八：腰--></span>
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .tipTail </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">77px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">url(localizerRight.gif) no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="color: #888888;"><!--图九：尾--></span>
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="tip"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="tipHead"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="tipBody"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="tipTail"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span>

运行上述代码，结果如下：

　　　　　　　　图十

不知道你有没有看上述的代码，建议你看一看，不然讲不下去咯。。。

上述代码看过后，发现有点不爽。

提示框应该会经常用吧，那干嘛不把它封装成一个插件呢！！这样就不必每次用它，都去写一遍或者copy一下，绝对影响效率，心情啊！！！

目前用的jQuery比较多，所以这里就初步讲讲jQuery插件封装咯。

思路：

1、提供相应属性，让操作者可以改变；如果操作者没有改变，使用默认属性。

2、利用提供的属性，绘制出相对应的提示框。

详情见下代码：

(<span style="color: #0000ff;">function</span><span style="color: #000000;"> ($){
　　</span><span style="color: #0000ff;">var</span> tip = <span style="color: #0000ff;">function</span><span style="color: #000000;">( p, ths ){
　　</span><span style="color: #0000ff;">var</span> _$ths =<span style="color: #000000;"> $(ths);
　　</span><span style="color: #0000ff;">var</span> _$parent =<span style="color: #000000;"> _$ths.parent();
　　_$ths </span>=<span style="color: #000000;"> _$ths.detach(); 
　　</span><span style="color: #008000;">/*</span><span style="color: #008000;">
　　　　p合并自定义属性,默认包括以下属性设置:
　　　　　　width 提示框内容区域的宽度,number
　　　　　　content 提示框中的提示内容
　　</span><span style="color: #008000;">*/</span><span style="color: #000000;">
　　p </span>=<span style="color: #000000;"> $.extend({
　　　　　　width: </span>200<span style="color: #000000;">,
　　　　　　content:</span>'sample'<span style="color: #000000;">
　　　　}, p);
　　</span><span style="color: #008000;">/*</span><span style="color: #008000;">
　　　　Draw:绘制提示框的函数
　　　　param: ths --> 提示框this
　　</span><span style="color: #008000;">*/</span>
　　<span style="color: #0000ff;">var</span> Draw = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
　　　　</span><span style="color: #0000ff;">var</span> children = '<div class="tipHead"></div>'
　　　　　　　　　　　　+'<div class="tipBody">'+p.content+'</div>'
　　　　　　　　　　　　+'<div class="tipTail"></div>'<span style="color: #000000;">;
　　　　</span><span style="color: #008000;">//</span><span style="color: #008000;">将children加入到提示框中</span>
<span style="color: #000000;">　　　　_$ths.append( children );
　　　　</span><span style="color: #008000;">//</span><span style="color: #008000;">动态设置提示框的样式和内容区域的宽度</span>
　　　　_$ths.addClass('tip').find('.tipBody'<span style="color: #000000;">).width( p.width );
　　　　_$parent.append(_$ths);
　　};</span><span style="color: #008000;">//</span><span style="color: #008000;">End_Draw</span>
　　<span style="color: #0000ff;">return</span> (<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
　　　　　　Draw();
　　　　　　_$parent </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">;
　　　　　　_$ths </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">;
　　　　})();
　　};
　　</span><span style="color: #008000;">/*</span><span style="color: #008000;">
　　　　$.fn.tip:提示框插件，用于提示用户
　　　　Param: property --> 自定义提示框的相关信息
　　</span><span style="color: #008000;">*/</span><span style="color: #000000;">
　　$.fn.tip </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">( property ) {
　　　　tip( property, </span><span style="color: #0000ff;">this</span><span style="color: #000000;"> );        
　　};</span><span style="color: #008000;">//</span><span style="color: #008000;">End_$.fn.timeProcess  </span>
})(jQuery);

拓展阅读：

纯CSS实现

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：网页中文乱码的问题解决方法 - 我有翅膀Next article：表单 - 唐枫

See more

另类提示框 - 猴子猿

Related articles