用jQuery定位背景

于 2020-08-05 14:57:43 发布
阅读量145 收藏
点赞数
文章标签： 定位 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:

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

bg
包
bg2
bg2
bg3
bg3
bg4
bg4

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

cuketao5066
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值