使用方法:

调用initMessagebox(“要显示的文字”)方法即可

<!--信息框-->
<div id="messagebox"></div>
<!--Load Jquery-->
<script src="js/jquery-1.11.3.min.js"></script>
<script>
/*提示信息框动态效果*/
var messageboxT;
var top1 = 10;
var opacity = 0;
//初始化数据
function initMessagebox(info) {
top1 = 10;
opacity = 0;
opacity1 = 1;
$("#messagebox").html(info);
$("#messagebox").css({ 'display': 'block' });
appearMessagebox();
}
//出现信息框
function appearMessagebox() {
top1 += 1;
opacity += 0.05;
if (opacity < 1) {
messageboxT = setTimeout("appearMessagebox()", 15);
}
else {
disappearMessagebox();
}
$("#messagebox").css({ 'top': String(top1) + 'px' });
$("#messagebox").css({ 'opacity': String(opacity) });
}
//隐藏信息框
function disappearMessagebox() {
opacity -= 0.05;
if (opacity > 0.05) {
messageboxT = setTimeout("disappearMessagebox()", 40);
}
else {
opacity = 0;
$("#messagebox").css({ 'display': 'none' });
}
$("#messagebox").css({ 'opacity': String(opacity) });
}
</script>

用到的css

#messagebox {
width:200px;
height:40px;
background-color:#f66;
position:absolute;
left:;
right:;
top:;
bottom:;
margin:10px auto;
display:none;
z-index:;
text-align:center;
line-height:40px;
}

html提示信息框淡入淡出效果(自己的思路,如果有更好的思路,请留言)的更多相关文章

  1. 【Android Developers Training】 69. 视图切换的淡入淡出效果

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. (转)winform Form 淡入淡出效果

    原文地址:http://blog.csdn.net/a237428367/article/details/5933565 using System.Runtime.InteropServices; p ...

  3. Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  4. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  5. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  6. 实现Bootstrap Carousel Fade Transition 淡入淡出效果

    html代码: <div id="carousel" class="carousel slide carousel-fade" data-ride=&qu ...

  7. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  8. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  9. C# 仿金山毒霸启动和关闭淡入淡出效果

    原文 C# 仿金山毒霸启动和关闭淡入淡出效果 01 #region 窗体关闭效果 02   03 #region 私有方法 04 [DllImportAttribute("user32.dl ...

随机推荐

  1. va_list 、va_start、 va_arg、 va_end 使用说明【转】

    转自:https://blog.csdn.net/f110300641/article/details/83822290 在ANSI C中,这些宏的定义位于stdarg.h中: typedef cha ...

  2. 阿里云Web应用防火墙采用规则引擎、语义分析和深度学习引擎相结合的方式防护Web攻击

    深度学习引擎最佳实践 {#concept_1113021 .concept} 阿里云Web应用防火墙采用多种Web攻击检测引擎组合的方式为您的网站提供全面防护.Web应用防火墙采用规则引擎.语义分析和 ...

  3. 2020年第二期《python接口自动化+测试开发》课程,已开学!

    2020年第二期<python接口自动化+python测试开发>课程,12月15号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:12月15号-3月29 ...

  4. CentOS最小化安装后找不到ifconfig命令

    1.ifconfig命令是设置或显示网络接口的程序,可以显示出我们机器的网卡信息, 可是有些时候最小化安装CentOS等Linux发行版的时候会默认不安装ifconfig等命令, 这时候你进入终端,运 ...

  5. 【软件工程1916|W(福州大学)_助教博客】2019年上学期期末问卷调查结果公示

    1.调查问卷概况 福州大学2019W班,收集到有效答卷44份 2. 调查问卷情况 Q1:请问你平均每周在课程上花费多少小时? 去除自估水平超过40小时的,平均16.6H Q2.软工实践的各次作业分别花 ...

  6. centos7 扩容

    用 df -h, 看到磁盘满了 (注意:如果是二,或者第三次扩容,下面的参数就不一样) fdisk /dev/sda 但是失败了,显示没有多余的分区 可以看到 有个/dev/sda4 是我在这之前刚刚 ...

  7. 百度PaddlePaddle:

    百度正式发布PaddlePaddle深度强化学习框架PARL 近日,百度PaddlePaddle正式发布了深度强化学习框架 PARL,同时开源了基于该框架的.在 NeurIPS 2018 强化学习赛事 ...

  8. e.preventDefault()

    定义和用法 取消事件的默认动作. 语法 event.preventDefault() 说明 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 ...

  9. [知识点]最近公共祖先LCA

    UPDATE(20180822):重写部分代码. 1.前言 最近公共祖先(LCA),作为树上问题,应用非常广泛,而求解的方式也非常多,复杂度各有不同,这里对几种常用的方法汇一下总. 2.基本概念和暴力 ...

  10. luoguP4213 【模板】杜教筛(Sum)杜教筛

    链接 luogu 思路 为了做hdu来学杜教筛. 杜教筛模板题. 卡常数,我加了register居然跑到不到800ms. 太深了. 代码 // luogu-judger-enable-o2 #incl ...