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卸载全部事件的思路详解
Apr 03 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php遍历CSV类实例
2015/04/14 PHP
详解php中反射的应用
2016/03/15 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
原生JS实现跑马灯效果
2017/02/20 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python字符串,数值计算
2016/10/05 Python
Python算法之图的遍历
2017/11/16 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Django model序列化为json的方法示例
2018/10/16 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
白鹤梁导游词
2015/02/06 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
导游词之青城山景区
2019/09/27 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏