Heim > Artikel > Web-Frontend > Beispiel-Tutorial zur jQuery-Implementierung des Prompt-Fade-In-Effekts
Beispiel-Tutorial zur jQuery-Implementierung des Prompt-Fade-In-Effekts
- 小云云Original
- 2018-01-12 11:28:061268Durchsuche
In diesem Artikel werden hauptsächlich Beispiele für die Verwendung von JQuery zur Erzielung des sofortigen Einblendeffekts vorgestellt, der einen guten Referenzwert hat. Werfen wir einen Blick mit dem untenstehenden Editor. Ich hoffe, er kann allen helfen.
Rendering:
Werfen Sie ohne weitere Umschweife einen Blick auf den Code:
<!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>
<title> jquery 提示语淡入</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.tishi-com{display:none;width:65px;height:20px;line-height:20px; background:#fff9c9; border:1px solid #c7bf93; color:#666;
position:relative;left:230px;top:-22px;}
</style>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
</head>
<body>
<p style="width:500px;height:200px;border:1px solid #E5E5E5;margin:0 auto;">
<p style="height:50px;width:100%;">
<label class="user-label">用户名：</label>
<input type="text" class="username" name="username"/>
<p class="tishi-com">
<span class="tishi-font font-12"></span>
</p>
</p>
<p style="height:50px;width:100%;">
<label class="user-label">手机号：</label>
<input type="text" class="phone" name="phone"/>
<p class="tishi-com">
<span class="tishi-font font-12"></span>
</p>
</p>
<p>
<input type="submit" class="fade" value="提交" />
</p>
</p>
<script type="text/javascript">
$(document).ready(function(){
$(".fade").click(function(){
var name=$.trim($(".username").val());
var phone=$.trim($(".phone").val());
if(name==""){
$('input[name=username]').siblings('.tishi-com').fadeIn();
$('input[name=username]').siblings('.tishi-com').find('.tishi-font').text('不能为空');
}
if(phone==""){
$('input[name=phone]').siblings('.tishi-com').fadeIn();
$('input[name=phone]').siblings('.tishi-com').find('.tishi-font').text('不能为空');
}
});
});
</script>
</body>
</html>Verwandte Empfehlungen:
So implementieren Sie normale H5-Textfeld-Eingabeaufforderungen
Empfohlene Zusammenfassung der 10 Eingabeaufforderungs-Quellcodes (Sammlungen)
Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur jQuery-Implementierung des Prompt-Fade-In-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!