另类提示框_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

另类提示框_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:21 AM

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

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

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

初步的做法嘛，就是利用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);

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7870

자바 튜토리얼

1649

Cakephp 튜토리얼

1407

라라벨 튜토리얼

1301

PHP 튜토리얼

1244

Related knowledge

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Apr 04, 2025 pm 11:54 PM

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.