用jQuery定位背景

Jquery Tutorial on how to Position Backgrounds

关于如何定位背景的jQuery教程

Today I will tell you about another one useful tool of JQuery – backgroundPosition plugin. It allow to reach different design ideas with color/background changing.

今天，我将向您介绍JQuery的另一个有用工具-backgroundPosition插件。通过改变颜色/背景，可以达到不同的设计思路。

As example, we want to create animated user friendly buttons or website navigation menu.

例如，我们要创建动画的用户友好按钮或网站导航菜单。

Someone can ask, why we need script if we can use hover effect + CSS styles. Here you will able to compare possibilities and see advantages of JQuery.

有人会问，如果可以使用悬停效果+ CSS样式，为什么需要脚本。在这里，您将能够比较可能性并看到JQuery的优势。

Here are Some very attractive samples:

以下是一些非常吸引人的示例：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

How to do this? Not so difficult:

这该怎么做？没那么困难：

步骤1. HTML (Step 1. HTML)

Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.

这是所有5个样本的来源。如您所见-我们有简单的无序列表，它们都非常相同，只是具有不同的\’id\’属性。

<ul id=\"ex1\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex2\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex3\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex4\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex5\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul>

<ul id=\"ex1\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex2\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex3\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex4\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul><ul id=\"ex5\"><li><a href=\"#\">Button 1</a></li><li><a href=\"#\">Button 2</a></li><li><a href=\"#\">Button 3</a></li><li><a href=\"#\">Button 4</a></li><li><a href=\"#\">Button 5</a></li></ul>

[/code]

步骤2. CSS (Step 2. CSS)

<style type=\"text/css\">h2 {padding-top:20px;clear:both;}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:hover, li a:focus, li a:active {background-position:-150px 0;}li a {background:url(bg2.jpg) repeat 0 0;}#ex1 a {background:url(bg.jpg) repeat -20px 35px;}#ex2 a {background:url(bg2.jpg) repeat 0 0;}#ex3 a {background:url(bg3.jpg) repeat 0 0;}#ex4 a {background:url(bg4.jpg) repeat 0 0;}#ex5 a {background:url(bg4.jpg) repeat 0 0;}</style>

<style type=\"text/css\">h2 {padding-top:20px;clear:both;}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:hover, li a:focus, li a:active {background-position:-150px 0;}li a {background:url(bg2.jpg) repeat 0 0;}#ex1 a {background:url(bg.jpg) repeat -20px 35px;}#ex2 a {background:url(bg2.jpg) repeat 0 0;}#ex3 a {background:url(bg3.jpg) repeat 0 0;}#ex4 a {background:url(bg4.jpg) repeat 0 0;}#ex5 a {background:url(bg4.jpg) repeat 0 0;}</style>

[/code]

步骤3. jQuery (Step 3. JQuery)

<script type=\"text/javascript\">$(function(){$(\'#ex1 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\"})}})})$(\'#ex2 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\"})}})})$(\'#ex3 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})})$(\'#ex4 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})})$(\'#ex5 a\').css( {backgroundPosition: \"0 0\"} ).click(function(){$(this).stop().animate({backgroundPosition:\"(0 -250px)\"}, {duration:200})}).mouseout(function(){$(this).stop().animate({backgroundPosition:\"(0 0)\"}, {duration:500})})});</script>

<script type=\"text/javascript\">$(function(){$(\'#ex1 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\"})}})})$(\'#ex2 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\"})}})})$(\'#ex3 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})})$(\'#ex4 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})})$(\'#ex5 a\').css( {backgroundPosition: \"0 0\"} ).click(function(){$(this).stop().animate({backgroundPosition:\"(0 -250px)\"}, {duration:200})}).mouseout(function(){$(this).stop().animate({backgroundPosition:\"(0 0)\"}, {duration:500})})});</script>

[/code]