jQuery实现IE6的淡入淡出提示功能效果实例-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

jQuery实现IE6的淡入淡出提示功能效果实例

小云云

Feb 05, 2018 pm 01:28 PM

ie jquery petunjuk

本文主要和大家介绍jQuery实现可兼容IE6的淡入淡出效果告警提示功能,结合具体实例形式分析了jQuery弹出警告提示功能的具体实现步骤与相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

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

一、基本目标

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

二、HTML布局

这里使用了p布局，没有使用表格布局。具体的float布置，可以参考《p+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>
<p style="float:left;">内容：</p><p id="errMsg" style="color:#ff0000;display:none;float:left;">错误！</p>
<p style="clear:both;"></p>
<p>
<textarea onchange="errTipsAlert(this)"></textarea><br />
</p>
</body>
</html>

Salin selepas log masuk

这是，希望大家注意到，这个告警函数是通过多行文本框的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>

Salin selepas log masuk

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7675

Tutorial CakePHP

1393

Tutorial C#

1207

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Tunjukkan Lagi

Related knowledge

Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi? Mar 13, 2024 pm 05:00 PM

Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi? Apabila kami menggunakan Google Chrome untuk membuka tab baharu, kadangkala kami menemui gesaan bahawa kandungan tab ini sedang dikongsi. Jadi, apakah yang sedang berlaku? Biarkan tapak ini menyediakan pengguna dengan pengenalan terperinci kepada masalah Google Chrome yang menggesa kandungan tab ini dikongsi. Google Chrome menggesa bahawa kandungan tab ini sedang dikongsi Penyelesaian: 1. Buka Google Chrome Anda boleh melihat tiga titik di sudut kanan atas pelayar "Sesuaikan dan kawal Google Chrome". ikon itu. 2. Selepas mengklik, tetingkap menu Google Chrome akan muncul di bawah, dan tetikus akan beralih ke "Lagi Alat"

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Apl Baidu Tieba menggesa bahawa operasi itu terlalu kerap, apa masalahnya? Apr 01, 2024 pm 05:06 PM

Apl Baidu Tieba menggesa bahawa operasi adalah terlalu kerap Gesaan ini biasanya untuk mengekalkan operasi biasa dan pengalaman pengguna platform untuk mengelakkan spam skrin berniat jahat, spam pengiklanan dan tingkah laku lain yang tidak sesuai, anda boleh membaca tutorial yang dikongsi oleh editor. Apl Baidu Tieba menggesa bahawa operasi itu terlalu kerap Berkongsi cara menanganinya 1. Apabila sistem menggesa [Operasi terlalu kerap], kami perlu menunggu seketika, anda boleh melakukan sesuatu yang lain dahulu. Secara amnya, selepas menunggu seketika, mesej gesaan ini akan Ia akan hilang secara automatik dan kita boleh menggunakannya seperti biasa. 2. Jika selepas menunggu lama, ia masih memaparkan [Operation Too Frequent], kita boleh cuba pergi ke Tieba Emergency Bar, Tieba Feedback Bar dan Tieba rasmi yang lain, pos untuk melaporkan fenomena ini dan minta kakitangan rasmi menyelesaikannya. 3.

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Feb 28, 2024 am 08:39 AM

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

Bagaimana untuk membatalkan lompat automatik ke Edge apabila membuka IE dalam Win10_Solution ke lompat automatik halaman pelayar IE Mar 20, 2024 pm 09:21 PM

Baru-baru ini, ramai pengguna win10 mendapati bahawa pelayar IE mereka sentiasa melompat ke pelayar tepi secara automatik apabila menggunakan pelayar komputer Jadi bagaimana untuk mematikan lompat ke tepi automatik apabila membuka IE dalam win10? Biarkan tapak ini dengan teliti memperkenalkan kepada pengguna cara melompat ke tepi dan menutup secara automatik apabila membuka IE dalam win10. 1. Kami log masuk ke pelayar tepi, klik... di penjuru kanan sebelah atas, dan cari pilihan tetapan lungsur turun. 2. Selepas kami memasukkan tetapan, klik Penyemak Imbas Lalai di lajur kiri. 3. Akhir sekali, dalam keserasian, kami menandakan kotak untuk tidak membenarkan tapak web dimuat semula dalam mod IE dan mulakan semula pelayar IE.

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Feb 29, 2024 am 09:03 AM

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu

See all articles