用jQuery定位背景

cuketao5066

于 2020-08-05 14:57:43 发布

阅读量116

点赞数

文章标签：定位 css html jquery js ViewUI

原文链接：https://www.script-tutorials.com/positioning-background-with-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>

步骤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>

步骤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>

步骤4.图片 (Step 4. Images)

Also we need few images for these demos:

同样，这些演示需要一些图像：

翻译自: https://www.script-tutorials.com/positioning-background-with-jquery/

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用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 wi...
复制链接

扫一扫