コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery_jquery に基づいたハッピーハロウィン特殊効果の実装

Jquery_jquery に基づいたハッピーハロウィン特殊効果の実装

WBOY
リリース： 2016-05-16 15:34:25
オリジナル
1786 人が閲覧しました

エフェクトの表示画像は次のとおりです:

ここをクリックしてレンダリングを表示します:

http://keleyi.com/keleyi/phtml/jqtexiao/6.htm

次は HTML コードです: 

<!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" />
<title>万圣节快乐！！-柯乐义</title>
<style type="text/css">
body{margin:0px;background-image:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/Halloween2013_Keleyi.jpg); background-repeat:no-repeat;background-color:#030303;background-position:center top;}
.animate
{
margin-top:600px;
height:130px;
width:620px;
margin-left:auto;
margin-right:auto;
background:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/keleyighost.gif) no-repeat;
background-position:-280px center;
}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function guitiao() {
$("div#animate_kel"+"eyi_com").css({backgroundPosition:'-280px center'});
$("div#animate_ke"+"leyi_com").animate({ backgroundPosition: "620" },20232,guitiao); 
});
</script>
</head>
<body>
<div id="animate_keleyi_com" class="animate">
</div>
<div><a href="http://keleyi.com/a/bjac/438uwrmi.htm" target="_blank">原文</a></div>
</body>
</html>
ログイン後にコピー

上記のコードは非常に簡単ではありませんか? これで、Jquery に基づいたハッピー ハロウィンの特殊効果の実装に関するチュートリアルは終わりです。皆さん、楽しみましょう。

関連ラベル：
jquery特效 jquery万圣节特效
ソース：php.cn
前の記事：js はクリックによるカウントダウン効果を実現して検証コード_javascript スキルを取得します 次の記事：XML/HTML_javascript スキルでの JavaScript 操作によく使用されるオブジェクト属性のコレクション
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS スタイルシートが機能しなくなり、HTML ファイルにリンクしなくなりました。原因は何でしょうか? 多くのフォーラムで答えを探し、約 50 の Google リンクを調べましたが、有効なものが見つかりませんでした。CSS が HTML に表示されません。私のコードは、フレックスボ...
から 2024-04-03 09:49:45
0
1
402
jQuery変数は文字列であるにもかかわらず未定義のURLにリダイレクトされます jQuery を使用して新しい URL にリダイレクトしようとすると問題が発生しますが、どういうわけかこの特定のケースでは機能しません。 htmlとDjangobacklogでjQ...
から 2024-04-01 21:03:17
0
1
341
Vueで条件付きレンダリングを行う方法 私はタスクを作成し、それらをリストに入れて効率的に追跡するために使用できるアプリを開発しています。リストとリスト内のタスクを作成しました。リスト内のリストに属するすべてのタスクをレ...
から 2024-04-01 19:36:54
0
1
329
ユーザーがあるページで画像をアップロードまたは変更し、別のページに表示できるようにするにはどうすればよいですか? ユーザーがあるページに写真をアップロードして、別のページに表示できるようにするにはどうすればよいですか?ユーザーは画像を変更でき、他のページでも同様に変更されます。また、php/j...
から 2024-04-01 18:33:31
0
1
332
JavaScript と jQuery を使用して ASP.NET MVC の Kendo Grid 選択列の特定の行のチェックを外す: ステップバイステップ ガイド ASP.NETMVC5 プロジェクトに KendoGrid があります。列の 1 つは選択列で、特定の条件を満たす場合はチェックボックスをオフにしてみます。チェックボックスの選択を...
から 2024-03-30 17:18:30
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート