ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryを使用して点滅するテキスト効果を実現する方法
jqueryを使用して点滅するテキスト効果を実現する方法
- coldplay.xixiオリジナル
- 2020-12-07 10:40:362536ブラウズ
jquery を使用してテキストの点滅効果を実現する方法: まず最新のノートの PID を取得し、ノートが正常に追加された後にノートをフラッシュします。次に、フラッシュ メソッドを関数に記述して直接呼び出すことができます。最後に、点滅している場合はタイマーがあるはずですので、タイマーをオンにしてください。
このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
jquery を使用してテキストの点滅効果を実現する方法:
1、最初に取得します。最新のノートの pid この pid は、バックグラウンドで提供されるインターフェイスによって返される値である可能性があります。
2. 加算が成功するとメモが点滅します
3. 点滅するメソッドは関数に記述して直接呼び出すことができます。
4. 点滅している場合はタイマーがあり、タイマーをオンにしている場合はタイマーをオフにする必要があります。
例、ページを開いたときに点滅します。
コード例:
<!DOCTYPE HTML>
<html>
<head>
<title>闪动提示</title>
<style>
*{ margin:0; padding:0;}
.box{color: #000}
.red{color:#d00;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script>
function shake(element,className,times){
var i = 0,
t = false ,
o = element.attr("class"),
c = "",
timestimes = times||2;
if(t) return;
t = setInterval(function(){
i++;
c = i%2 ? o + ' ' + className : o;
element.attr("class",c);
if(i==2*times){
clearInterval(t);
element.removeClass(className);
}
},200);
};
$(function(){
//domready 就闪动
shake($(".box"),"red",3);
});
</script>
</head>
<body>
<div class="box">打开就闪动</div>
</body>
</html>次のコードは、2 種類のクリック フラッシュと、フォーム入力エラーのフラッシュなどの異なる検証フラッシュをプロンプトします。
コード サンプル:
//点击闪动
$("#box1").bind({
click:function(){
shake($(this),"red",3);
return false;
}
});
//通不过mail校验闪动
$("#mail").blur(
function(){
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) {
shake($(this),"red",3);
}
}
);関連学習の推奨事項:JavaScript ビデオ チュートリアル
以上がjqueryを使用して点滅するテキスト効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。