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 29 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现购物车全功能
Jan 11 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
jquery获取元素索引值index()示例
2014/02/13 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
物业管理工作方案
2014/05/10 职场文书
银行授权委托书格式
2014/10/10 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
详解python的内存分配机制
2021/05/10 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
Python之matplotlib绘制折线图
2022/04/13 Python