【java web】--Beetl+html鼠标悬停提示气泡

最新推荐文章于 2023-07-03 15:41:52 发布
最新推荐文章于 2023-07-03 15:41:52 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： 项目总结 文章标签： web beetl 提示气泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangmei4968/article/details/51255115
版权

 

业务需求

　　用户中心有三个图标：手机、邮箱、银行卡绑定。如果完成了相应的绑定工作，图标就显示深色，未完成图标就是浅色，气泡中提示相应的文字和链接。示意图如下，主要要实现气泡弹出功能。

 

 

 

 

 

实现思路

　　１．鼠标移到图片上，隐藏的div弹层属性改成：显示，弹层背景是一个类似qq会话的图片，如上图所示。

　　２．鼠标离开图片，关闭div弹层 。

　　３．鼠标移动到气泡内，显示文字，并关闭其他气泡。

　　４．鼠标移出气泡，关闭本气泡。

 

完成代码

html+beetl

 

	<div class="phone_r">
		<h1>${user.userName},欢迎您！</h1>
		<P>认证信息：
								
		<%if(phone==0){%>
			<img src="${request.contextPath}/resources/img/htel.jpg" class="wimg"  onmouseover="showdiv('p_01');closediv('p_02');closediv('p_03');" />
		<%}else if(phone.certifiedStatus==1) {%>
			<img src="${request.contextPath}/resources/img/ztel.jpg" class="wimg"  onmouseover="showdiv('p_01');closediv('p_02');closediv('p_03');" />
		<%}%>
								
		<%if(email==0){%>
			<img src="${request.contextPath}/resources/img/tb1.jpg" class="wimg1" onmouseover="showdiv('p_02');closediv('p_01');closediv('p_03')" />
		<%}else if(email.certifiedStatus==1) {%>
			<img src="${request.contextPath}/resources/img/z-mail.jpg" class="wimg1" onmouseover="showdiv('p_02');closediv('p_01');closediv('p_03')" />
		<%}%>
								
		<%if(bank==0){%>
			<img src="${request.contextPath}/resources/img/htuoguan.jpg" class="wimg2" onmouseover="showdiv('p_03');closediv('p_01');closediv('p_02')" />
		<%}else if(bank.bankCardStatus==2){%>	
			<img src="${request.contextPath}/resources/img/z-tuoguan.jpg" class="wimg2" onmouseover="showdiv('p_03');closediv('p_01');closediv('p_02')" />
		<%}else if(bank.bankCardStatus==1){%>
			<img src="${request.contextPath}/resources/img/z-tuoguan.jpg" class="wimg2" onmouseover="showdiv('p_03');closediv('p_01');closediv('p_02')" />
		<%}%>
								
								
		<span>资料完整度${percent!}%，完成“ ${unfishedPart!}”可获得${partialIntegral!}积分奖励；</span>
		</P>
								
								
		<div id="p_01" class="bubble1" onmouseout="closediv('p_01')" >
			<img src="${request.contextPath}/resources/img/bubble.png" onmouseover="showdiv('p_01')" >
			<%if(phone==0){%>
				<span  onmouseover="showdiv('p_01')" >您还没验证手机， <a href="${request.contextPath}/ssl/account/toSetting.htm">立即验证 </a></span>
			<%}else if(phone.certifiedStatus==1) {%>
				<span  onmouseover="showdiv('p_01')" >您已验证手机: ${strutil.subStringTo(phone.mobile,0,3)}****${strutil.subStringTo(phone.mobile,7,11)}</span>
			<%}%>						
		</div>
								
		<div id="p_02" class="bubble2" onmouseout="closediv('p_02')" >
			<img src="${request.contextPath}/resources/img/bubble.png" onmouseover="showdiv('p_02')">
			<%if(email==0){%>
				<span  onmouseover="showdiv('p_02')">您还没验证邮箱， <a href="${request.contextPath}/ssl/account/toSetting.htm">立即验证 </a></span>
			<%}else if(email.certifiedStatus==1) {%>
				<span  onmouseover="showdiv('p_02')">您已验证邮箱:${strutil.subStringTo(email.email,0,2)}*****${ strutil.split (email.email,"@")[1]}</span>
			<%}%>
		</div>
								
		<div id="p_03" class="bubble3"  onmouseout="closediv('p_03')" >
			<img src="${request.contextPath}/resources/img/bubble.png" onmouseover="showdiv('p_03')">
			<%if(bank==0){%>
				<span  onmouseover="showdiv('p_03')">您还没有绑定银行卡， <a href="${request.contextPath}/ssl/account/toSetting.htm">立即绑定 </a></span>
			<%}else if(bank.bankCardStatus==2){%>
				<span  onmouseover="showdiv('p_03')">您已绑定银行卡: ${strutil.subStringTo(bank.bankCard,0,3)}***********${strutil.subStringTo(bank.bankCard,bankLength-5,bankLength-1)}</span>
			<%}else if(bank.bankCardStatus==1){%>
				<span  onmouseover="showdiv('p_03')">您绑定银行卡正在认证中</span>
			<%}%>
		</div>


css

 

 

/*我的普惠----手机，邮箱，银行卡，鼠标滑动显示气泡*/
.phone_r{
	position:relative;
}
.phone_r div.bubble1{
	margin-bottom:10px;
	display:block;
	position:absolute;
	left:30px;
	bottom:-10px;
	display:none;
}
.phone_r div.bubble1 img{
	display:inline-block;
	width:220px;
	height:35px;
	position:relative;
}

.phone_r div.bubble1>span{
	position:absolute;
	left:-35px;
	top:20px;
	color:#666666;
}
.phone_r div.bubble1>span>a{
	color:#ed345a;
}

.phone_r div.bubble2{
	margin-bottom:10px;
	display:block;
	position:absolute;
	left:62px;
	bottom:-10px;
	display:none;
}
.phone_r div.bubble2 img{
	display:inline-block;
	width:220px;
	height:35px;
	position:relative;
}

.phone_r div.bubble2>span{
	position:absolute;
	left:-35px;
	top:20px;
	color:#666666;
}
.phone_r div.bubble2>span>a{
	color:#ed345a;
}



.phone_r div.bubble3{
	margin-bottom:10px;
	display:block;
	position:absolute;
	left:95px;
	bottom:-10px;
	display:none;
}
.phone_r div.bubble3 img{
	display:inline-block;
	width:220px;
	height:35px;
	position:relative;
}

.phone_r div.bubble3>span{
	position:absolute;
	left:-35px;
	top:20px;
	color:#666666;
}
.phone_r div.bubble3>span>a{
	color:#ed345a;
}


js

 

 

//显示气泡
			function showdiv(obj){
				 if(obj==1){
					 $(".bubble1").hide();
					}else if (obj==2){
					$(".bubble2").hide();
					}else if (obj==3){
					$(".bubble3").hide();
					}
					
				 document.getElementById(obj).style.display = "block";
						
				}
			
			//隐藏气泡
			function closediv(obj){
				 document.getElementById(obj).style.display = "none";
				}

 

 

字符串转换成数组（例如：2496868487转换成[2],[4]……[7]）

 

StringbankCard=accountCapitalService.getCustBankByUserId(user.getId()).getBankCard();
char[] arrayBankCard=bankCard.toCharArray();//字符串转换成数组
int bankLength=arrayBankCard.length;

 

 

 

 

 

 

开发前二期的jsp代码

 

function authInfo(){
	//实名认证
	if("${realName.certifiedStatus}"==1){
		$("#nameMsg").html("您已开通资金托管:"+'${fn:substring(realName.realName,0,1)}**');
		$("#nameStatus").addClass("card_red");
		$("#security").html("安全等级：高");
	}else{
		$("#nameMsg").html("您未开通资金托管，<a href=\"toSetting.htm?realName\" >立即开通</a>");
		$("#nameStatus").addClass("red");
		$("#security").html("安全等级：低");
	}
	//手机认证
	if("${phone.certifiedStatus}"==1){
		$("#telMsg").html("您已验证手机:"+'${fn:substring(phone.mobile,0,3)}****${fn:substring(phone.mobile,7,-1)}');
		$("#telStatus").addClass("tel_red");
	}else{
		$("#telMsg").html("您还没验证手机，<a href=\"toSetting.htm?mobile\">立即验证</a>");
		$("#telStatus").addClass("red");
	}
	//邮箱认证
	if("${email.certifiedStatus}"==1){
		$("#emailMsg").html("您已验证邮箱:"+'${fn:substring(email.email,0,2)}*****${fn:split(email.email,"@")[1]}');
		$("#emailStatus").addClass("email_red");
	}else{
		$("#emailMsg").html("您还没验证邮箱，<a href=\"toSetting.htm?email\" >立即验证</a>");
		$("#emailStatus").addClass("red");
	}
	//银行卡认证
	if("${bank.bankCardStatus}"==1){
		$("#bankMsg").html("您绑定银行卡正在认证中");
		$("#bankStatus").addClass("red");
	}
	else if("${bank.bankCardStatus}"==2){
		$("#bankMsg").html("您已绑定银行卡:"+'${fn:substring(bank.bankCard,0,3)}**********${fn:substring(bank.bankCard,14,-1)}');
		$("#bankStatus").addClass("bank_red");
	}else{
		$("#bankMsg").html("您还没有绑定银行卡，<a href=\"toSetting.htm?bank\" >立即绑定</a>");
		$("#bankStatus").addClass("red");
	}
}

 

 

 

 

 

个人感受

       思路很重要，有很多细节是需要基础的。比如一些截取字符串subString ,分割字符spilt，这些都是我们学习的基础。不管是js,beetl还是el,jstl，这些都是很核心的东西，学会一个思路，下一个再用的时候变通一下就好啦！

        

 

喵喵7781
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
html中鼠标冒泡泡,鼠标经过出现气泡框的简单实例
weixin_39731456的博客
06-09 892
今天看到一个css效果不错，转一下1. htmlAnimated Menu Hover 1$(document).ready(function(){$(".menu li").hover(function() {$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");}, function() {$(this).find(...
html鼠标悬停显示块级元素,“鼠标移入显示悬浮框”特效【转】
weixin_34708601的博客
06-10 3998
1、效果说明在效果当中，当用户将鼠标移入一个块时，会从鼠标的移入方向滑入一个悬浮块，悬浮块会随着鼠标移出当前块，且滑出方向遵循鼠标的移出方向2、实现原理分析1、结构分析由于悬浮层有可能从上下左右四个方向滑入目标块，因此需要先针对结构进行处理。在此，可以通过两种方法实现“悬浮层”。一种方法是为每个块定位四个悬浮块(上下左右)，当满足鼠标移入的条件时，让相应的悬浮块滑入；第二种方法是只为每个块定位一个...
html5气泡提示框鼠标悬停气泡文字框提示代码
09-08
html5气泡提示框鼠标悬停气泡文字框提示代码
quill鼠标悬浮 出现提示_html实现鼠标悬停显示气泡文字内容
weixin_39935388的博客
12-21 768
需求描述：当鼠标悬停在一个元素上的时候，显示气泡，气泡内容可以是一段文字或图片。实现如下：html>气泡显示.container{margin-top:130px;}#xsztip{padding:8px12px;width:140px;display:block;font-size:16px;color:#fff;font-weight:bold;background:...
html5鼠标悬停提示框,HTML5鼠标悬停动画提示框特效源码，前端必备
weixin_28999945的博客
06-04 1101
效果图今天给各位官人带来的是，HTML5鼠标悬停动画提示框特效源码！效果炫图生动，给网站带来较好的交互体验！由于代码过长需要文档版源码来我的前端群581549454，已上传到群文件废话不多说，上源码！.tooltip {position: relative;display: inline-block;}.tooltip__trigger {cursor: pointer;position: rel...
HTML5鼠标悬停弹性动画Tooltip提示框特效.zip
07-11
<link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" />... 这是一款使用HTML5 SVG来制作，并通过anime.js来制作非常炫酷的鼠标悬停弹性动画代码的弹性动画Tooltip提示框特效。
sprity-css-rollover:在鼠标悬停时提供视频预览效果
05-21
提供鼠标悬停时的视频预览效果 如果没有鼠标悬停，则允许使用默认图像 查看 要求 版本> = 1.0 安装 npm i sprity-css-rollover 用法 <!-- Change cursor manually, if needed --> < style type =" text/...
jquery-mytooltip插件鼠标悬停文字提示代码.zip
07-11
<link rel="stylesheet" href="jquery.mytooltip.css?3.1.64">  <link rel="stylesheet" ... jquery.mytooltip插件是一款支持上下左右不同方向显示提示信息的jQuery鼠标悬停文字提示代码，是很多种效果。
易语言鼠标悬停提示
07-23
易语言鼠标悬停提示源码,鼠标悬停提示
html鼠标移动到图片上显示冒泡框,RN 经验
weixin_28363123的博客
06-08 426
每天一点点11. 创建指定版本react-native init demo --version 0.55.4 指定版本2. 跨页面传值DeviceEventEmitter事件传值 // 引入import {...DeviceEventEmitter} form 'react-native';//发送事件的页面DeviceEventEmitter.emit('userNameDidChange', ...
鼠标悬停,用气泡形式提示用户信息
最新发布
mmwanwen的博客
07-03 386
鼠标悬停,用气泡形式提示用户信息
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
09-29 2483
【代码】【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果。
html鼠标移动到图片上显示冒泡框,Bootstrap 教程 - 提示冒泡(Tooltip)
weixin_39965881的博客
06-08 1089
提示冒泡(Tooltip)使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例，用于本地标题存储的动画和数据属性。概览使用提示冒泡持件时应了解以下：Tooltip提示冒泡组件依赖于 Popper.js ，你必须将popper.min.js 文件放在 bootstrap.js之前调用，或者使用 bootstrap.bundle.min.js / bootstra...
html怎么制作气泡,制作CSS气泡框
weixin_28814119的博客
06-10 558
气泡状文本框，是一种很生动的网页设计手段。它可以用来表示用户的发言。也可以用来作为特定信息的提示符。DVD租借网站Netflix，还用它显示碟片的详细信息。=========================制作CSS气泡框的传统方法，需要5张背景图片，分别是：* tl.gif，左上方的圆角。* tr.gif，右上方的圆角。* bl.gif，左下方的圆角。* br.gif，右下方的圆角。* angl...
html5气泡提示效果,纯CSS3实现鼠标悬停提示气泡效果
weixin_39972768的博客
06-03 367
CSS3制作鼠标悬停提示气泡内容菜单 body{ background:#D6D3C9; color:#383835; font-family:Arial, Arial, Helvetica, sans-serif; } #bubblemenu li { ...
气泡浮动背景特效 html+css
热门推荐
你好呀，很高兴你在看这里~
02-04 1万+
先看效果： 实现： 添加标签底层盒子，再直接暴力添加10个气泡标签： <div class="kuang"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div>
Web-HTML-概述和基本语法
qdzjo的博客
09-27 617
HTML 1.概述 HTML 指的是超文本标记语言。用来开发网页。 其中， 超文本：可以放图片、超链接、视频、音频等。 文本：只能放文字。 标记：标签，标记信息。 2.基本语法 使用开发工具 HbuilderX 创建一个基本项目：js,css,img,index.html html文件基本框架 <!-- html 注释 --> <!DOCTYPE html><!-- 声明html语言版本 --> <html><!-- 网页文件的根，所有内容必须写在htm
beetl在线自定义html标签,07.HTML标签以及自定义定界符配置---《Beetl视频课程》
weixin_39943678的博客
06-03 168
本期视频实现了评论列表分页；内容简介：使用了HTML完成分页抽取，并且介绍了自定义定界符作者：GKHTML标签Beetl 也支持HTML tag形式的标签，个人认为，这是一种引用模板更加优雅的实现，能和静态HTML标签融为一体。比如在一个模板中引用另外一个模板，我们可以使用include我们也可以为 page.html定义一个HTML标签,那他的调用方法就变成了下面这种。是不是更加符合，静态HTM...
beetl 页面标签_beetl定界符和html标签起冲突怎么解决
weixin_30211217的博客
01-13 389
使用smarty时，当运行该php页面时报如下错误:Fatal error: Uncaught exception'SmartyCompilerException' with message 'Syntax Error in template".\temp\gy.html" on line 10 "table{background:blue;}" - Unexpected":", expected...
el-radio-button 如何设置鼠标悬停效果
05-24
您可以使用 CSS 中的 `:hover` 伪类选择器来设置鼠标悬停效果。以下是一个示例： ```html <el-radio-button class="hover-effect">选项1</el-radio-button> ``` ```css .hover-effect:hover { background-color: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值