用jQuery淡化背景 [英] Fading a background with jQuery
本文介绍了用jQuery淡化背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道，因为我对JavaScript或jQuery不太好，所以如何淡化这个背景： html {
background-image：url（image.png）;
}
添加到不同的背景图片，而不会使整个文档淡化，但每隔只有背景2秒？
我不知道该怎么做。我一直在研究和尝试自己做这件事，但过去三天没有成功。
任何帮助都非常感谢。
如果您需要代码，请在这里：
index.html
<！DOCTYPE html>
< html>
< head>
< title> Buddies服务器主页< / title>
< link href =css / styles.css =stylesheet/>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< / head>
< body>
< div class =body>
< div class =nav>
< div class =header>
< img src =images / Logo.png/>
< / div>
< div class =right-side>
< img src =images / home.png/>
< / div>
< div class =nav-buttons>
< a href =http://192.168.2.202/server>< img src =images / buttons / servers.png/>< / a>
< a href =about.php>< img src =images / buttons / about.png/>< / a>
< a href =/ forum / index.php>< img src =images / buttons / forums.png/>< / a>
< / div>
< div class =notif_container>
< div class =notif>< p id =notif>通知：Buddies Network正在维护中。感谢您的耐心等待。< / p>< / div>
< / div>
< / div>
< / div>
< div class =content>
< div class =post>
< table id =post>
< tr>
< td id =title>< h2>博客条目1< / h2>< / td>
< / tr>
< tr>
< td>< h5 id =author> DirectX3DNerd，7/23/13< / b>< / td>
< / tr>
< tr>
< td id =body>< p> Post Body< / p>< / td>
< / tr>
< / table>
< table id =post>
< tr>
< td id =title>< h2>博客条目2< / h2>< / td>
< / tr>
< tr>
< td>< h5 id =author> DirectX3DNerd，7 / 1337/13< / b>< / td>
< / tr>
< tr>
< td id =body>< p> Post Body - Jacob was Here< / p>< / td>
< / tr>
< / table>
< / div>
< div class =side_bar>
< table id =side_bar>
< tr>
< td>< h2>欢迎！< / h2>< / td>
< / tr>
< tr>
< td>< p>欢迎来到好友网！ Minecraft的家，黑桃王牌和Team Fortress 2服务器！如果您想在其中一台服务器上播放，请点击< a href =servers.php>这里< / a>< / p>< / td>
< / tr>
< / table>
< / div>
< / div>
< div class =footer>
< b&& copy; Buddies Network，2012-2014。< / b>
< / div>
< / body>
< script>
var image1 ='images / bg.png';
var image2 ='images / bg2.png';
函数fade（）{
$（html）.css（'background-image'，image1）;
$（html）.css（'background-image'，image1）;
}
< / script>
< / html>
styles.css
/ *文件属性* /
html {
background：url（'../ images / bg.png'）no-repeat center center fixed;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
background-size：cover;
}
/ *服务器列表属性* /
.server_list {
width：500px;
height：400px;
margin：auto;
}
.server_list li {
width：60％;
保证金：auto;
}
/ *字体属性* /
b {
font-family：Times New Roman，Times，serif;
}
h1 {
font-family：Times New Roman，Times，serif;
}
p {
font-family：Times New Roman，Times，serif;
}
/ *页面模板* /
/ *导航栏* /
.header {
position：relative;
left：-1px;
}
.right-side {
position：absolute;
剩下：850px;
top：1px;
}
.notif {
background-color：＃00FF15;
position：relative;
top：4px;
}
#notif {
color：＃000000;
font-family：摩纳哥的Lucida Console，等宽;
/ * font-size：79％; * /
宽度：800px;
height：35px;
margin：auto;
position：relative;
top：10px;
溢出：auto;
word-wrap：分词;
}
.nav {
background-color：#FFFFFF;
min-height：79px;
最小宽度：100％;
位置：固定;
top：0px;剩余
：0px;
右：0px;
}
/ *页脚* /
.footer {
background-color：#eee;
min-width：100％;
height：20px;
位置：固定;
左：0px;
bottom：0px;
}
/ *博客帖子样式* /
.post {
background-image：url（'../ images / trans_bg.png'）;
颜色：白色;
位置：绝对;
z-index：-1;
top：200px;
left：350px;
width：550px;
height：750px;
}
#post {
position：relative;
left：0px;
padding：0;
保证金：0;
}
#title {
position：relative;
top：-10px;
left：0px;
}
#author {
position：relative;
top：-50px;
left：0px;
}
#body {
position：relative;
top：-80px;
left：0px;
$ b $ *杂项* /
.side_bar {
background-image：url（'../ images / trans_bg.png'）;
颜色：白色;
位置：固定;
top：190px;
left：5px;
width：250px;
word-wrap：打破单词;
溢出：隐藏;
}
/ *链接属性* /
a：link {color：white; }
a：visited {color：white; }
a：hover {color：white; }
a：active {color：white; }
解决方案
添加此
jQuery（document）.ready（function（）{
$ b $（html）。css（{
' ）;
$ b $（html）。animate（{background：'url（image.png）'}，350）;
}）;
仅用于第一个图像淡化效果。如果您希望为不同的图像提供这种效果，您可以尝试使用此插件确定你会从它得到很酷的输出。
I am wondering, because I am not good with JavaScript or jQuery, how to I fade a background of this:
html {
background-image:url(image.png);
}
to a different background image without fading the whole document, but only the background every 2 seconds?
I have no idea how to do this. I have been researching and trying to do this myself, but no success for the past three days.
Any help is greatly appreciated.
If you need the code, here it is:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Buddies Server Home</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="body">
<div class="nav">
<div class="header">
<img src="images/Logo.png" />
</div>
<div class="right-side">
<img src="images/home.png" />
</div>
<div class="nav-buttons">
<a href="http://192.168.2.202/server"><img src="images/buttons/servers.png" /></a>
<a href="about.php"><img src="images/buttons/about.png" /></a>
<a href="/forum/index.php"><img src="images/buttons/forums.png" /></a>
</div>
<div class="notif_container">
<div class="notif"><p id="notif">NOTIFICATION: Buddies Network is under maintenance. Thank you for your patience.</p></div>
</div>
</div>
</div>
<div class="content">
<div class="post">
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 1</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/23/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body</p></td>
</tr>
</table>
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 2</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/1337/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body - Jacob was Here</p></td>
</tr>
</table>
</div>
<div class="side_bar">
<table id="side_bar">
<tr>
<td><h2>Welcome!</h2></td>
</tr>
<tr>
<td><p>Welcome to Buddies Netowrk! Home of the Minecraft, Ace of Spades, and Team Fortress 2 server! If you want to play on one of the servers, click <a href="servers.php">here</a></p></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<b>© Buddies Network, 2012-2014.</b>
</div>
</body>
<script>
var image1 = 'images/bg.png';
var image2 = 'images/bg2.png';
function fade() {
$(html).css('background-image', image1);
$(html).css('background-image', image1);
}
</script>
</html>
styles.css
/* Document Properties */
html {
background: url('../images/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Server List Properties */
.server_list {
width:500px;
height:400px;
margin: auto;
}
.server_list li {
width:60%;
margin:auto;
}
/* Font Properties */
b{
font-family:"Times New Roman", Times, serif;
}
h1{
font-family:"Times New Roman", Times, serif;
}
p{
font-family:"Times New Roman", Times, serif;
}
/* Page Template */
/* Navigation Bar*/
.header {
position:relative;
left:-1px;
}
.right-side {
position:absolute;
left:850px;
top:1px;
}
.notif {
background-color:#00FF15;
position:relative;
top:4px;
}
#notif {
color:#000000;
font-family:"Lucida Console", Monaco, monospace;
/*font-size:79%;*/
width:800px;
height:35px;
margin:auto;
position:relative;
top:10px;
overflow:auto;
word-wrap:break-word;
}
.nav {
background-color:#FFFFFF;
min-height:79px;
min-width:100%;
position:fixed;
top:0px;
left:0px;
right:0px;
}
/* Footer */
.footer {
background-color:#eee;
min-width:100%;
height:20px;
position:fixed;
left:0px;
bottom:0px;
}
/* Blog Post styles */
.post {
background-image:url('../images/trans_bg.png');
color:white;
position:absolute;
z-index:-1;
top:200px;
left:350px;
width:550px;
height:750px;
}
#post {
position:relative;
left:0px;
padding:0;
margin:0;
}
#title {
position:relative;
top:-10px;
left:0px;
}
#author {
position:relative;
top:-50px;
left:0px;
}
#body {
position:relative;
top:-80px;
left:0px;
}
/* Misc */
.side_bar {
background-image:url('../images/trans_bg.png');
color:white;
position:fixed;
top:190px;
left:5px;
width:250px;
word-wrap:break-word;
overflow:hidden;
}
/* link Properties */
a:link { color:white; }
a:visited { color:white; }
a:hover { color:white; }
a:active { color:white; }
解决方案
add this
jQuery(document).ready(function() {
$("html").css({
'background-image': ''
});
$("html").animate({ background:'url(image.png)'},350);
});
That's only for the first image fade effect. If you want this effect for different images you might want to try this plug-in I'm sure you will get cool output from it.
这篇关于用jQuery淡化背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
