使用jQuery实现显示文字气球的提示
本文由发表于7年前 | Javascript | 暂无评论 |  被围观 6,897 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实现显示文字气球提示

jQuery实现显示文字气球提示

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/balloon-using-jquery-to-achieve-the-prompt-display-text.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/15
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 OSCache缓存框架介绍 局部缓存和全局缓存的使用和基本配置项 2011/10/6
2 XSS与HTTP-only Cookie 脚本获取JSESSIONID的方法 2012/1/30
3 Java Web笔记 – Servlet多线程同步问题及其解决方法 2011/11/10
4 Tomcat源码分析 – HttpServlet的源码分析 2011/11/10
5 org.apache.el.parser.ParseException JSTL中EL表达式错误提示 2011/7/30
6 Java Web笔记 – Cookie的使用 2011/11/12
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.