JavaScript + Ajax 実践サンプル集 - jQuery backgroundPosition

jQuery backgroundPosition

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのbackgroundPositionプラグインを使用してメニューをアニメーション化しています。マウスをメニューに移動すると色が変わります。

このサンプルで使用しているイメージの一部です。

ここでは、jQueryのanimate()を使用してanchor要素に設定した背景イメージのbackground-positionを徐々に書き換えてアニメーション化させています。

$('#a a')
  .css({ backgroundPosition: "-20px 35px" })
  .mouseover(function() {
    $(this).stop().animate({ backgroundPosition: "(-20px 94px)" }, 
      { duration: 500 })
  })
  .mouseout(function() {
    $(this).stop().animate({ backgroundPosition: "(40px 35px)" }, 
      { duration: 200, complete: function() {
        $(this).css({ backgroundPosition: "-20px 35px" })
      }
    })
  })

<!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>jQuery - Background Position</title>
  <link href="jQuery/bgPosition/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/bgPosition/jquery.bgpos.js" type="text/javascript"></script>
  <script type="text/javascript">
  
    $(function() {

$('#a a')
		    .css({ backgroundPosition: "-20px 35px" })
		    .mouseover(function() {
		      $(this).stop().animate({ backgroundPosition: "(-20px 94px)" }, { duration: 500 })
		    })
		    .mouseout(function() {
		      $(this).stop().animate({ backgroundPosition: "(40px 35px)" }, { duration: 200, complete: function() {
		        $(this).css({ backgroundPosition: "-20px 35px" })
		      }
		      })
		    })
    		  
      $('#b a')
		    .css({ backgroundPosition: "0 0" })
		    .mouseover(function() {
		      $(this).stop().animate({ backgroundPosition: "(-150px 0)" }, { duration: 500 })
		    })
		    .mouseout(function() {
		      $(this).stop().animate({ backgroundPosition: "(-300px 0)" }, { duration: 200, complete: function() {
		        $(this).css({ backgroundPosition: "0 0" })
		      }
		    })
		  })
		  
      $('#c a')
		    .css({ backgroundPosition: "0 0" })
		    .mouseover(function() {
		      $(this).stop().animate({ backgroundPosition: "(0 -250px)" }, { duration: 500 })
		    })
		    .mouseout(function() {
		      $(this).stop().animate({ backgroundPosition: "(0 0)" }, { duration: 500 })
		    })
		    
      $('#d a')
		    .css({ backgroundPosition: "0 0" })
		    .mouseover(function() {
		      $(this).stop().animate({ backgroundPosition: "(0 -250px)" }, { duration: 500 })
		    })
		    .mouseout(function() {
		      $(this).stop().animate({ backgroundPosition: "(0 0)" }, { duration: 500 })
		    })
		  });
      
  </script>

</head>
<body>
  <h2>Example 0: No Script</h2>
  <ul id="noscript">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example A: Top down</h2>
  <ul id="a">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example B: Right left</h2>
  <ul id="b">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example C: Fade 1-colour</h2>
  <ul id="c">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example D: Fade 2-colour</h2>
  <ul id="d">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {

  $('#a a')
    .css({ backgroundPosition: "-20px 35px" })
    .mouseover(function() {
      $(this).stop().animate({ backgroundPosition: "(-20px 94px)" }, { duration: 500 })
    })
    .mouseout(function() {
      $(this).stop().animate({ backgroundPosition: "(40px 35px)" }, { duration: 200, complete: function() {
        $(this).css({ backgroundPosition: "-20px 35px" })
      }
      })
    })
  	  
  $('#b a')
    .css({ backgroundPosition: "0 0" })
    .mouseover(function() {
      $(this).stop().animate({ backgroundPosition: "(-150px 0)" }, { duration: 500 })
    })
    .mouseout(function() {
      $(this).stop().animate({ backgroundPosition: "(-300px 0)" }, { duration: 200, complete: function() {
        $(this).css({ backgroundPosition: "0 0" })
      }
    })
  })

  $('#c a')
    .css({ backgroundPosition: "0 0" })
    .mouseover(function() {
      $(this).stop().animate({ backgroundPosition: "(0 -250px)" }, { duration: 500 })
    })
    .mouseout(function() {
      $(this).stop().animate({ backgroundPosition: "(0 0)" }, { duration: 500 })
    })
    
  $('#d a')
    .css({ backgroundPosition: "0 0" })
    .mouseover(function() {
      $(this).stop().animate({ backgroundPosition: "(0 -250px)" }, { duration: 500 })
    })
    .mouseout(function() {
      $(this).stop().animate({ backgroundPosition: "(0 0)" }, { duration: 500 })
    })
});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/*
body 
{
background-image: url(bg.jpg); 
background-repeat: no-repeat; 
background-attachment: fixed;
background-position: 40px 35px; 
}
*/


h2
{
  clear: both;
  padding-top: 20px;
}

ul
{
  list-style: none;
  margin: 0;
  padding: 0;
}

li
{
  float: left;
  width: 100px;
  margin: 0;
  padding: 0;
  text-align: center;
}

li a
{
  display: block;
  padding: 5px 10px;
  height: 100%;
  color: #FFF;
  text-decoration: none;
  border-right: 1px solid #FFF;
}
li a
{
  background: url(bg2.jpg) repeat 0 0;  /* 350 x 50 */
}

li a:hover, li a:focus, li a:active
{
  background-position: -160px 0;        /* -150px 0 */
}

#a a
{
  background: url(bg.jpg) repeat -20px 35px;   /*  -20px 35px */ 
}

#b a
{
  background: url(bg2.jpg) repeat 0 0;
}

#c a
{
  background: url(bg3.jpg) repeat 0 0;
}

#d a
{
  background: url(bg4.jpg) repeat 0 0;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/bgPosition/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jQuery/bgPosition/jquery.bgpos.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <h2>Example 0: No Script</h2>
  <ul id="noscript">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example A: Top down</h2>
  <ul id="a">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example B: Right left</h2>
  <ul id="b">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example C: Fade 1-colour</h2>
  <ul id="c">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h2>Example D: Fade 2-colour</h2>
  <ul id="d">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQuery backgroundPosition

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQuery backgroundPosition

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!