jQueryでいいねの乱数表示アニメーション効果を実現（オンラインデモとデモソースコードダウンロード付き）

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryでいいねの乱数表示アニメーション効果を実現（オンラインデモとデモソースコードダウンロード付き）_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

jquery アニメーションのように

この記事の例では、jQuery で実装されたいいねの乱数表示のアニメーション効果について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモを表示するには、ここをクリックしてください。

完全なサンプルコードについてはここをクリックしてくださいこのサイトからダウンロードしてください。

具体的なコードは次のとおりです:

<!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=gb2312" />
<title>jQuery实现点赞数字累加动画效果</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";}
.tip{text-align:center;padding-top:10%;font-size:2em;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("html,body").on("click",function(e){
  anp(e);
})
function anp(e){
  var n=Math.round(Math.random()*10);
  var $i=$("<b>").text("+"+n);
  var x=e.pageX,y=e.pageY;
  $i.css({top:y-20,left:x,position:"absolute",color:"#E94F06"});
  $("body").append($i);
  $i.animate({top:y-180,opacity:0,"font-size":"1.4em"},1500,function(){
    $i.remove();
  });
  e.stopPropagation();
}
</script>
</head>
<body>
<div class="tip">点击页面任意位置查看效果</div>
</body>
</html>

ログイン後にコピー

この記事が jQuery プログラミングのすべての人に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

WeChat ビデオアカウントの「いいね」と「ラブ」の違いは何ですか?用途は何ですか? Mar 26, 2024 pm 12:16 PM

WeChat ビデオアカウントでは、ユーザーが対話する一般的な方法として、「いいね！」や「愛」があります。「いいね！」は、好きな動画コンテンツに対するユーザーの認識とサポートを示し、ハートは動画作成者に対するユーザーの愛と関心を示します。「いいね！」と「ハート」はどちらも動画コンテンツに対するユーザーの認識と愛を表しますが、その内容には微妙な違いがいくつかあります。 1. WeChat ビデオアカウントの「いいね」と「ラブ」の違いは何ですか?多くの場合、「いいね！」は一般的な承認とサポートを表現する方法であり、ユーザーはビデオの下にある「いいね！」ボタンをクリックするだけでビデオへの承認を表明します。このシンプルで直接的な形式により、ユーザーは自分の意見を迅速に表明できると同時に、ビデオがより広く拡散するのにも役立ちます。愛は個人的で感情的なものです。 WeChat ビデオアカウントで、ユーザーは「」をクリックできます。

最初に入力してから終了するように ppt アニメーションを設定する方法 Mar 20, 2024 am 09:30 AM

私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキストボックスの外側をクリックしてテキストボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[

小紅書が「いいね！」したコメントはどこで読めますか?小紅書プラットフォームではどのようなルールに注意する必要がありますか? Mar 30, 2024 pm 06:51 PM

今日の情報爆発の時代において、ソーシャルメディアは人々の日常生活に欠かせないものとなっています。中国を代表するライフスタイル共有プラットフォームとして、Xiaohongshu はここで情報を共有し、入手するために多くのユーザーを魅了しています。では、Xiaohongshu プラットフォームで「いいね」のコメントを表示するにはどうすればよいでしょうか?この記事ではこの質問に詳しく答えます。 1. 小紅書が「いいね！」したコメントはどこで読めますか?まず、Xiaohongshu プラットフォームでアカウントにログインする必要があります。ログインすると、ホームページでおすすめのコンテンツや、フォローしている人の更新情報が表示されます。各投稿の下には、「いいね」ボタンとコメントボタンが表示されます。この内容に同意する場合は、「いいね！」ボタンをクリックしてください。コメントボタンをクリックすると、コンテンツに対する他のユーザーのコメントが表示されます。 3.場合

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

小紅書さんが気に入った他の人のコメントについてどう思いますか?どのタイプのコンテンツが「いいね！」やコメントを獲得する可能性が高いですか? Mar 30, 2024 pm 08:06 PM

デジタル時代において、Xiaohongshu は人々が生活を共有し、経験を交換するための重要なプラットフォームとなっています。ユーザーは「いいね！」やコメントを通じて交流し、緊密なソーシャルネットワークを形成します。この記事では、Xiaohongshu で他の人が「いいね！」したコメントを表示する方法と、「いいね！」やコメントを獲得しやすいコンテンツの種類について説明します。 1. 小紅書が気に入った他の人のコメントについてどう思いますか?ユーザーは、「いいね！」のコメントを表示して、サポートや好意を表明することで対話できます。具体的な閲覧方法は以下のとおりです。 1. 小紅書ホームページで「発見」ボタンをクリックして「発見」ページに入ります。 2. 「Discover」ページで「Circle」ボタンをクリックして「Circle」ページに入ります。 3. [サークル] ページで、興味のあるトピックやサークルを参照し、気に入ったコメントを見つけます。 4. コメントをクリックすると、「いいね！」が表示されます

jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

雷雨PPTでアニメーション雷雨を作成する方法 Mar 20, 2024 pm 02:41 PM

時々、ppt にアニメーションを追加する必要がある場合があります。たとえば、雷雨の ppt を作成し、それにアニメーションの雷雨効果を追加したい場合、どうすればよいでしょうか?今日は編集者が雷雨pptでアニメーション雷雨を作る方法を紹介します。実はとても簡単なので、ぜひ学んでください! 1. まず、図に示すように、「挿入」-「図形」-「基本図形」-「稲妻図形」のPPTページを開きます。 2. 右側の「塗りと線」タブで、図のように「塗り」：白、「選択」「線」：黒を選択します。 3.「アニメーション」－「カスタムアニメーション」－「効果の追加」－「強調」－「微妙」－「ちらつき」をクリックし、

See all articles

jQueryでいいねの乱数表示アニメーション効果を実現（オンラインデモとデモソースコードダウンロード付き）_jquery

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック