悬浮提示工具（悬浮出现自动消失）

之前做过的提示工具是使用bootstrap的模态窗做的，有人说并不好，需要点击关闭，设置时间较长

但是那个提示工具就是为了时间较长，必须看到才做的，也就是说，设计之初的目的就是出现错误才看到的反馈。

而对于一般的成功提示，非表单验证的操作提示，需要在操作出现的时候直接反馈结果，并非在固定位置显示一段文字

（会影响整体布局移动）

所以做了一个悬浮的提示工具，想法来源于一款游戏中的提示（具体不说，不想给打广告）

对于css没有仔细制作，只完成功能和简单样式，简单调用，源码简答，位置，大小等自己修改

代码如下（需要jquery，bootstrap，jquery.easi）

/*** 悬浮式提示框* @author：liuyuhang* @param：html：要提示的内容，可注入html，换行使用<br>,内容简单自己修改*/function lyhFloatTip(html) {var random = Math.floor(Math.random() * (100000 - 10000 + 1) + 10000);var id = 'tip-' + random;var tip = $('<div>').addClass('float-tip text-center form-control').css({//提示内容div'background-image' : 'linear-gradient(to right, #555555 0%, #555555 70%, #333333 100%)','color' : 'white','height' : 'auto','min-height' : '40px','position' : 'fixed','top' : '75%','left' : '145px','width' : '400px','z-index' : '3200','border' : '1px solid white','padding' : '10px 10px 10px 50px','box-shadow' : '3px 3px 3px #999999','display' : 'none','opacity' : 0.2,}).html(html).attr('id', id);//加入提示内容var leftDiv = $('<div>').css({'position' : 'fixed','background-color' : 'white','width' : '40px','height' : '30px','margin-top' : '-25px','margin-left' : '-45px','border-radius' : '3px','color' : 'black','padding' : '5px 0px'}).html('TIPS');tip.append(leftDiv);$('body').append(tip.show());//载入div并显示$('#' + id).animate({//悬浮上移动画top : '65%',opacity : '1'}, 1000, 'easeOutQuart');setTimeout(function() {//消失动画$('#' + id).animate({opacity : '0'}, 1000, 'easeOutQuart');setTimeout(function() {//移除$('#' + id).remove();}, 1000)}, 2000);}

　　lyhFloatTip('要展示的提示内容');即可调用

点击效果

显示到消失一共4秒，时间自行修改

转载于:https://www.cnblogs.com/liuyuhangCastle/p/10375284.html

悬浮提示工具（悬浮出现自动消失）相关推荐

【巨人的肩膀上制造世界】——5——Unity3D实用插件之Mouse Interaction-Object Highlight，快速构建模型的悬浮高亮！悬浮提示！悬浮动画！
[巨人的肩膀上制造世界]--5--Unity3D实用插件之Mouse Interaction-Object Highlight,快速构建模型的悬浮高亮!悬浮提示!悬浮动画! 目录 1.博客介绍 2.内 ...
qt弹出框自动消失的悬浮提示框_QT【简单自定义弹出提示框】：非模态，数秒后自动消失...
目标效果:一个提示信息框,创建后显示提示信息,一定时间后自动消失,不阻塞原来窗口. 思路: 自定义一个控件,继承自QWidget,构造时设置定时器,时间到则自我销毁. ### 实现代码代码一共两个文 ...
winform子窗口notifyIcon鼠标悬浮会自动消失问题处理
C# winform子窗口notifyIcon鼠标悬浮会自动消失的解决方法看网上好像还没有这方面的记录,为了其他人别踩坑出篇小文 winform中子窗口notifyIcon鼠标悬浮自动消失的问题,我 ...
IDEA相关配置（特别完整）看完此篇就将所有的IDEA的相关配置都配置好了、设置鼠标滚轮修改字体大小、设置鼠标悬浮提示、设置主题、设置窗体及菜单的字体及字体大小、设置编辑区主题、通过插件更换主题
文章目录 1.创建模块(Module) 2.常用配置 2.1Appearance & Behavior 2.1.1设置主题 2.1.2设置窗体及菜单的字体及字体大小 (可忽略) 2.1.3补充 ...
在指定位置上方出现通用jquery悬浮提示框插件全站通用
工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式. 请转载此文的朋友务必附带原文链接,谢谢. 原文链 ...
弹出提示框自动消失
我们在进行增.删.改.查的时候,很多时候都需要一个提示信息以表明所做操作的成功等状况.有些人喜欢用alert()来提示,这不太人性化,因为alert()弹出来的提示框必须点确定才能继续进行其它操作.我 ...
Android Studio怎么设置悬浮提示文字框显示函数
[摘要]AndroidStudio函数悬浮提示文字框设置方法一:AndroidStudio在默认情况下是不会和Eclipse那样,鼠标移动到一个类或... Android Studio函数悬浮提示文字 ...
[css] 使用css实现悬浮提示文本
[css] 使用css实现悬浮提示文本 <div class="tips-demo" data-tips="提示文本">演示文本</div&g ...
IDEA Translation插件安装及设置鼠标悬浮提示的自动翻译
1.安装插件 Translation 2.设置鼠标悬浮提示 3.在代码界面鼠标悬停在方法上就会自动翻译提示

悬浮提示工具（悬浮出现自动消失）

悬浮提示工具（悬浮出现自动消失）相关推荐

最新文章

热门文章