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

2023-11-10

使用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实现显示文字气球提示

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • (七)nodejs写http服务

    1 加载http模块 var http require http 2 创建http服务对象 var server http createServer 3 监听request请求事件 server on request function re
  • c语言作业:一帮一

    一帮一学习小组 是中小学中常见的学习组织方式 老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组 本题就请你编写程序帮助老师自动完成这个分配工作 即在得到全班学生的排名后 在当前尚未分组的学生中 将名次最靠前的学生与名次最靠后的异性学生分
  • Java课题笔记~ SpringMVC的四种跳转方式

    默认的跳转是请求转发 直接跳转到jsp页面展示 还可以使用框架提供的关键字redirect 进行一个重定向操作 包括重定向页面和重定向action 使用框架提供的关键字forward 进行服务器内部转发操作 包括转发页面和转发action
  • opencv(C++) 视频处理,通过三通道像素值平均 将视频分辨率缩小为原来的一半

    项目要求 将一个 1920 1080 的视频压缩为 960 540 的视频 帧率不变 将每个 2 2 相邻像素点的像素值求平均 变成一个新的像素点 即 2 2 的平均池化 程序中很多代码都来源于 OpenCv 4 快速入门 方法一 分别取出
  • vs2019中 当前上下文中不存在名称“ViewBag”和不存在“model”的解决思路

    如果你已经改了Web config的相关配置 还是没有解决这个问题 你可以尝试保存并退出当前的vs 然后重新启动你的项目 本人通过许多途径找解决的办法 结果还是没有解决 最后还是通过重新启动项目解决的
  • 金融和大模型的“两层皮”问题

    几年前 我采访一位产业专家 他提到了一个高科技到产业落地的主要困惑 两层皮 一些特别牛的技术成果在论文上发表了 这是一层皮 企业的技术人员 将这些成果产品化 商品化的时候 可能出于工程化的原因 会做一些简化 这是另一层皮 两层皮之间 是有g
  • mvc html类的作用域,SpringMVC使用session保存数据以及applicationContext作用域

    使用session保存数据 session是一次会话 里面可以有多次请求 1 HttpSession session 1 1 index jsp Hello World 1 2 success jsp Created by IntelliJ
  • 机器人地面站-[QGroundControl源码解析]-[10]-[Comm]

    前言 因为项目进度排期较紧 并且觉得之前在代码中添加注释的方法有些生硬用处不大 所以从本片开始 着重介绍类的内容和功能 只对重要代码进行粘贴 Comm文件夹下有众多的类 一 LinkConfiguration 这个类处理链路的配置 查看属性
  • 机器学习之PCA算法

    目录 PCA算法 PCA目标 PCA原理推导 基于最大可分性推导 基于最近重构误差推导 PCA算法流程 PCA优点 PCA缺点 基于PCA的人脸识别 PCA算法 PCA 即主成分分析 Principal Component Analysis
  • 校招——2021多益网络软件开发笔试和面试

    多益网络软件开发笔试和面试 要毕业了 临到五月才开始才开始找工作 一方面由于前期做毕设和搞论文拖到现在 期间在二月份就开始有点压力迫切想找工作 越到后面反而平静了好多 所谓破罐子破摔 一开始没想投多益的 是刚好身边有朋友进了多益 他是从三月
  • 代码随想录刷题day13

    239 滑动窗口最大值 给你一个整数数组 nums 有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧 你只可以看到在滑动窗口内的 k 个数字 滑动窗口每次只向右移动一位 返回 滑动窗口中的最大值 示例 输入 nums 1 3 1
  • angularJS 转换UTC时间及DateFormat问题

    filter date milliSec yyyy MM dd HH mm ss 在angularJS 中 date filter会把时间转换为本地时间 即会按照电脑右下角的时间设置的时区来转换 dateObject getFullYear
  • AI支持的自然语言编程

    由开发新编程语言的讨论而突然想到的一些想法 今天在微信上看到了CSDN主办的一个讨论 是魏永明和许式伟两位老总谈新的编程语言 他们两人都是为数极少的中国创造的编程语言的创始人 难得 可贵 在听他们的讨论时 一个想法突然冒了出来 感觉这个想法
  • 热诱导蠕变

    原文链接 https cn comsol com model thermally induced creep 207 蠕变是一种非弹性瞬态变形 材料在足够高的温度 如熔点的 40 或更高 下受应力作用时会发生蠕变 实验蠕变数据 使用恒定应力
  • TCP协议如何保证可靠性

    TCP协议传输的特点主要就是面向字节流 传输可靠 面向连接 这篇博客 我们就重点讨论一下TCP协议如何确保传输的可靠性的 确保传输可靠性的方式 TCP协议保证数据传输可靠性的方式主要有 校验和 序列号 确认应答 超时重传 连接管理 流量控制
  • 机械技术在橡胶工业中的应用概述 机械外文文献翻译

    原文 Mechanical Technology in the rubber industry outlined in the application In the development of human society is the m
  • 性能测试如何做?从0到1性能测试实战(手把手教)

    目录 导读 前言 一 Python编程入门到精通 二 接口自动化项目实战 三 Web自动化项目实战 四 App自动化项目实战 五 一线大厂简历 六 测试开发DevOps体系 七 常用自动化测试工具 八 JMeter性能测试 九 总结 尾部小
  • 各种排序的比较和使用场景分析

    冒泡排序 冒泡排序重复地走访过要排序的数列 一次比较两个元素 如果他们的顺序错误就把他们交换过来 走访数列的工作是重复地进行直到没有再需要交换 也就是说排序完成 规模比较小的时候应用冒泡排序 主要应用于教学 选择排序 只会移动N次 选择排序
  • 最大熵模型简介[例子+推导+GIS求解…

    这篇文章是结合论文http www cqvip com Main Detail aspx id 7707219对博文 http www cnblogs com hexinuaa p 3353479 html加入自己的理解做了简化重写 另外本
  • 使用jQuery实现显示文字气球的提示

    使用jQuery实现显示文字气球的提示 本文由 arthinking 发表于884 天前 Javascript 暂无评论 被围观 3 115 views 为了使页面效果更绚丽 可以使用文字气球的提示功能 在jQuery中 可以使用简单的几条