使用jQuery实现显示文字气球的提示

使用jQuery实现显示文字气球的提示 本文由 arthinking 发表于884 天前 ⁄ Javascript ⁄ 暂无评论 ⁄ 被围观 3,115 views+

为了使页面效果更绚丽，可以使用文字气球的提示功能，在jQuery中，可以使用简单的几条语句实现。

这里实现一个文字气球提示，在页面的按钮上点击时，该按钮的右边会向下展开一个提示信息框。再次点击，该信息框收起。

首先是编写HTML页面，基本代码如下：

<div class="content_read_more">
    <div class="read_more_arrow"></div>
    <div class="more_tips">
        <div>

http://www.itzhai.com:当我们使用搜索引擎时发现会有自动提示的功能，那么，它是怎么实现的呢？在jQuery中结合Ajax可以很容易实现自动完成的功能。

            下面就在jQuery中使用Ajax提交post请求，让服务器端返回自动完成的数据显示在相应的div中。 
        </div>
    </div>
</div>

<div class="read_more_arrow">配合下面的CSS样式显示为一个箭头的按钮；
<div class="more_tips">为提示框。

CSS代码如下：

.content_read_more {
width:25px;
height:100px;
float:left;
display:inline;
position:relative;
}
.read_more_arrow{
width:20px;
height:20px;
float:left;
margin-top:40px;
margin-left:2px;
cursor:pointer;
background:url(../images/question_arrow1.png) no-repeat;
}
.more_tips {
display:none;	/*首先隐藏提示区块*/
position:absolute;
left:20px;
top:40px;
width:300px;
height:200px;
background:url(../images/readmore_tips.png) no-repeat;
}
.more_tips div{
width:260px;
height:160px;
margin:20px;
line-height:20px;
overflow:auto;
}

以下是Javascript代码：

$('.read_more_arrow').click(function(event){
		$(this).next().slideToggle("slow");
});

效果图如下：

jQuery实现显示文字气球提示

除了文章中有特别说明，均为IT宅原创文章，转载请以链接形式注明出处。
本文链接： http://www.itzhai.com/balloon-using-jquery-to-achieve-the-prompt-display-text.html

关键字: jQuery, 提示

原文地址：
http://www.itzhai.com/balloon-using-jquery-to-achieve-the-prompt-display-text.html