js で動的な「元宵節 唐源」特殊効果を実装（Baidu を模倣）
Baidu のホームページにある「元宵節 唐源」アニメーションを模倣します: (js スケジュールされたタスク: setInterval)
原則: カット画像が必要で、画像はカットのように作成されます。連続的な位置決めによる画像 フレームごとの画像が再生されてアニメーションが形成される
レンダリング:
カットアドレス:
https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
ページ コード:
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
String ctxPath = request.getContextPath();
request.setAttribute("ctxpath", ctxPath);//项目根路径
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>
<%-- <link href="${ctxpath}/css/main.css" rel="stylesheet"> --%>
<title>首页</title>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){ //6210
// 0 270 540 810 1080 1890 2700 2970 3510 3780 4050 4320 5130 5940 6480 7290
// 定时任务,每隔100ms执行一次函数
setInterval("tangyuan()",100);
setInterval("tangyuan1()",100);
//setInterval("indexChange()",1);
});
//汤圆 正着挖
var count = 0;
function tangyuan(){
count = count - 270;
if(count == -8370){
count = 0;
}
var ctxpath = '${ctxpath}';
//url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")
//https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
$("#tangyuan").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count+"px"+" 0px no-repeat");
}
//汤圆 倒着挖
var count1 = -8370;
function tangyuan1(){
count1 = count1 + 270;
if(count1 == 0){
count1 = -8370;
}
var ctxpath = '${ctxpath}';
//url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")
//https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
$("#tangyuan1").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count1+"px"+" 0px no-repeat");
}
</script>
</head>
<body>
<span style="position: absolute;left: 30%">汤圆我要正着挖(●ˇ∀ˇ●)：</span>
<!-- background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; -->
<div id="tangyuan" style="position: absolute; top: 0px; left: 50%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">
</div>
<span style="position: absolute;left: 0%">汤圆我要倒着挖o(*￣︶￣*)o：</span>
<!-- background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; -->
<div id="tangyuan1" style="position: absolute; top: 0px; left: 20%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">
</body>
</html>推奨学習: 「JavaScript ビデオ チュートリアル 」
以上がjs で動的な「元宵節 唐源」特殊効果を実装（Baidu を模倣）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7322
9
1625
14
1350
46
1262
25
1209
29
JS と Baidu Maps を使用してマップ パン機能を実装する方法
Nov 21, 2023 am 10:00 AM
JS と Baidu Map を使用してマップ パン機能を実装する方法 Baidu Map は広く使用されている地図サービス プラットフォームで、Web 開発で地理情報、位置情報、その他の機能を表示するためによく使用されます。この記事では、JS と Baidu Map API を使用してマップ パン機能を実装する方法と、具体的なコード例を紹介します。 1. 準備 Baidu Map API を使用する前に、Baidu Map Open Platform (http://lbsyun.baidu.com/) で開発者アカウントを申請し、アプリケーションを作成する必要があります。作成完了
株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます
Dec 17, 2023 pm 06:55 PM
株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
丹子党 袁元子が丹子島に帰還：元宵節中に島で再会
Feb 23, 2024 pm 06:16 PM
もちろん、元宵節の期間中は同窓会のために島に行かなければなりませんが、丹子党は苗廟新店舗準備、同窓会福祉祭り、面白い元宵節、元宵節ブラインドボックスなど、多くの元宵節活動を特別に用意しました。期間限定割引返品、食品加工工場ダンザイコンパウンドがオンラインで販売されるイベントの詳細を見ていきましょう。 Danzi Party YuanyuanziがDanzi Islandに戻ります: 元宵節中に島で再会 Miaomiao 新店舗準備イベント 時間: 2月22日 12:00 ～ 2月29日 23:59 イベント範囲: サーバー内の全プレイヤー イベント内容: 野菜人 Miaomiao が準備中丹子島に新しい店舗をオープンするため、ミャオミャオが準備タスクを完了するのを手伝うと、3 月 1 日の店舗オープン後にレアなアクセサリーを入手できるようになります。 3 月 1 日には、Eggboys もイベントを通じて無料で出演することができます。
PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする
Dec 18, 2023 pm 03:39 PM
インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した
PHP と JS を使用して株価ローソク足チャートを作成する方法
Dec 17, 2023 am 08:08 AM
PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備 開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3
JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法
Nov 21, 2023 am 10:53 AM
JS と Baidu Maps を使用して地図ポリゴン描画機能を実装する方法 現代の Web 開発において、地図アプリケーションは一般的な機能の 1 つになっています。地図上にポリゴンを描画すると、ユーザーが表示および分析できるように特定のエリアをマークするのに役立ちます。この記事では、JS と Baidu Map API を使用して地図ポリゴン描画機能を実装する方法と、具体的なコード例を紹介します。まず、Baidu Map API を導入する必要があります。次のコードを使用して、Baidu Map API の JavaScript を HTML ファイルにインポートできます。
祭りを祝う同窓会、「After Tomorrow」ランタンフェスティバルシリーズの活動が開始
Feb 23, 2024 pm 08:37 PM
親愛なる生存者の皆さん、ランタンフェスティバルを祝うために、アライアンスは一連のエキサイティングな活動を開始しました。料理コンテストに参加して、料理の質問を通じてよりおいしいレシピをアンロックし、義務ポイントと報酬を獲得してください。調査チームや二人でのトレーニングも挑戦を待っています。友達を誘って楽しいランタンフェスティバルを過ごしましょう! 【料理コンテスト】 】 料理を愛する者よ、生き残った者に祝福あれ、2月22日から3月6日まで、元宵節のレシピが料理コンテストに追加されます。毎日9:00から23:50まで、キャンプの噴水または101の入り口に行き、モニカに話しかけ、料理クイズに参加し、謎のレシピをアンロックし、さらに多くのプレゼントがあなたを待っています! [ランタンフェスティバルリアンリアンカン]フェスティバル期間中, オンラインイベントでは、今日から3月7日8:00まで、ランタンフェスティバル連蓮館が開催されます。イベント期間中、オンラインに接続することでレシピの欠片、再構築された分子、レアアイテムを入手できます。
