Changing background image one time on responsive b

2019-08-30 07:56发布

站内问答 / jQuery
650 2 5

The code I'm using is this one 

background: url(bilder/cover.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

What I'd like to accomplish is that the background image is changed after like 2 sec to a background image that then stays put.

I know there are Jqueries for changing backgrounds like this but I'm not sure how to make something like that work with the code I'm using! It would be awesome if someone hade a solution to this!

My starting point for changing background was the code I found on w3schools:

{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

2条回答
你好瞎i
2楼-- · 2019-08-30 08:26

EXAMPLE

HTML

<div id="myBackground"></div>

CSS

#myBackground {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;

    background: url(http://jsfiddle.net/img/initializing.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript

var imgUrl = "url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png)";

$(function() {    //    starts when page is loaded and ready
    setTimeout(function() {
        $("#myBackground").css("background-image", imgUrl);
    }, 2000);    //    2 second timer
})

Alternate Style (with FadeIn/Out effect)

HTML

<div id="myBackground">
    <img src="http://jsfiddle.net/img/initializing.png" />
    <img src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png" />
</div>

CSS

#myBackground {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
#myBackground img {
    height: 100%;
    width: 100%;
}
#myBackground img:nth-child(2) {
    display: none;
}

JavaScript

$(function() {    //    starts when page is loaded and ready
    setTimeout(function() {
        $("#myBackground img:nth-child(1)").fadeOut("slow");
        $("#myBackground img:nth-child(2)").fadeIn(1500);
    }, 2000);    //    2 second timer
})
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
3楼-- · 2019-08-30 08:29 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>demo by roXon</title>


<script  src="s.js"></script>
<style>

article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; }

*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}

body{background:#000;}

.images{
margin:50px;
position:relative;
}
.images img{
position:absolute;
}

.glowed{
box-shadow: 0px 0px 40px 2px #fff
}

</style>
</head>
<body>

<button id="stop">STOP IT!</button>

<div class="images">
<img src="images/9.jpg" />
<img src="images/9red.jpg" class="glowed"/>
</div>



<script>
var stop = false;

function loop(){
if(stop===false){
$('.images img:eq(1)').fadeIn(700, function(){
$(this).fadeOut(700,loop);
});
}
}

loop(); // start loop


$('#stop').click(function(){
stop=true;
});
</script>


</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)