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 17 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP概率计算函数汇总
2015/09/13 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python实现简单五子棋游戏
2019/06/18 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
保护环境倡议书范文
2014/05/13 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
铁路安全反思材料
2014/12/24 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
放假通知怎么写
2015/08/18 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
Python函数对象与闭包函数
2022/04/13 Python