English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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>
  <title>磁力画像</title>
  <style type="text/css">
    #imgSel{position:absolute;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $("function () {
      $("document").mousemove(function (e) {
        $("#imgSel").animate({"left":e.pageX,"top":e.pageY},0.1);
      });
    });
  </script>
</head>
<body>
  <img id="imgSel" src="../images/select.JPG" />
</body>
</html>

jQueryに関するさらに詳しい内容に興味を持つ読者は、本サイトの特集を参照してください:《jQuery 切り替え効果と技術の要約》、《jQuery 拡張技術の要約》、《jQuery 常用プラグイン及び使用方法の要約》、《jQuery タブレット効果と技術の要約》、《jQuery テーブル(table)操作技術の総括》、《jQuery 中的Ajax使用方法の要約》、《jQuery 常見の古典効果の総括》、《jQuery アニメーションと効果の使用方法の要約》及び《jQuery セレクタの使用方法の要約》

本文の内容が皆様のjQueryプログラムデザインに役立つことを願っています。

声明:本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーにより自発的に提供され、アップロードされた内容であり、本サイトは所有権を有しておらず、人工的な編集は行われていません。著作権侵害の疑いがある場合は、メールを送信して:notice#oldtoolbag.com(メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとりたいとされると、本サイトは即座に侵害疑いのコンテンツを削除します。)

おすすめ