jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例


Posted in jQuery onSeptember 20, 2017

本文实例讲述了jQuery实现可兼容IE6的淡入淡出效果告警提示功能。分享给大家供大家参考,具体如下:

其实我觉得告警提示的话,直接用一个Alert就最好的。开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有“弹窗挺吓人”的思潮,因此,告警提示你必须做得好看一点。在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择。之所以选择jQuery,是因为这东西能够很好地兼容IE6。

一、基本目标

当输入框的输入内容的字符数无论中文与英文大于10的情况下。就弹出告警,具体效果如下,在IETest的IE6环境中测试通过。

jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

二、HTML布局

这里使用了div布局,没有使用表格布局。具体的float布置,可以参考《DIV+CSS网页制作布局技巧学习》,这里就不多说了,很简单的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>告警提示</title>
</head>
<body>
<div style="float:left;">内容:</div><div id="errMsg" style="color:#ff0000;display:none;float:left;">错误!</div>
<div style="clear:both;"></div>
<p>
<textarea onchange="errTipsAlert(this)"></textarea><br />
</p>
</body>
</html>

这是,希望大家注意到,这个告警函数是通过多行文本框的onchange触发的,触发的时候把自己传递给那个函数。同时告警文本已经设置好,只是一开始处于隐藏状态。

同时注意打头引入jquery。

三、jquery脚本

这里之所以用到FadeTo0的方式去淡出,而不像《使用JQ来编写最基本的淡入淡出效果》用show()与hide()显示,是因为show()与hide()没有淡入淡出的效果。而FadeIn与FadeOut会发生文字的移位的,不好看。

<script>
function errTipsAlert(obj){
 //obj把自己传递过来了,如果多行文本框里面的内容多于10个字
 if(obj.value.length>10){
  //那么错误提示文本errMsg就一开始在1秒之内透明度从0变成1,之后又在1秒之内透明度从1变成0,再同理变回来,从而实现淡入淡出的闪烁提示。
  $("#errMsg").fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1);
  //然后多行文本框的边框加粗,变红
  $(obj).css("border","2px solid #ff0000");
 }
 else{
  //否则错误提示文本errMsg就在1毫秒内透明变变成0,相当于hide()方法,但是hide()在某些情况下会发生移位。
  $("#errMsg").fadeTo(1,0);
  //恢复多行文本框的边框
  $(obj).css("border","1px solid #cccccc");
 }
}
</script>

多行文本框就不要设置动画了。虽然你可以像《jQuery循环动画与获取组件尺寸的方法》那样对borderwidth属性设置动画,但是这个动画非常卡的。因此最好还是不要这样做。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery返回定位插件详解
May 15 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery 一键复制到剪切板的实例
Sep 20 #jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
JS跨域问题详解
2014/11/25 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
50岁生日感言
2014/01/23 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2014年应急工作总结
2014/12/11 职场文书
旅行社计调工作总结
2015/08/12 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫