[英]How to change background image with jQuery
I am using jQuery to change the background image of a page. 我正在使用jQuery来更改页面的背景图像。 At the moment I am using two different buttons which switch the image from Image A to Image B. Image A is shown by default. 目前,我使用两个不同的按钮将图像从图像A切换到图像B。默认情况下显示图像A。
What I would like to achieve is to change the image with a single button which changes name when clicked. 我要实现的是用一个按钮更改图像,单击该按钮即可更改名称。
So for Image A the button should just say Zoom In and when clicked, Image B is shown in the background but the button will say Zoom Out. 因此,对于图像A,按钮应仅显示“放大”,而在单击时,背景中将显示图像B,但按钮将显示“缩小”。
Apologies if I've not explained it clearly. 抱歉,如果我没有清楚解释。
jQuery(document).ready(function() {
var images = ['image-A.gif'];
var url = images[Math.floor(Math.random() * images.length)];
var img = new Image();
img.onload = function(){
jQuery('#test').css({'background-image': 'url('+url+')','background-size' : 'cover', 'background-position' : '50px 0'});
jQuery('#test').fadeIn(1000);
}
img.src = url;
});
jQuery(function(){
jQuery("#aChange").click(function(){
jQuery("#test").css("background-image", "url(image-B.gif)");
jQuery("#test").css("background-position", "50px -100px");
jQuery("#test").css("background-repeat", "no-repeat");
jQuery("#test").css("background-size", "cover");
return false;
});
jQuery("#bChange").click(function(){
jQuery("#test").css("background-image", "url(image-A.gif)");
jQuery("#test").css("background-position", "50px 0");
jQuery("#test").css("background-repeat", "no-repeat");
jQuery("#test").css("background-size", "cover");
return false;
});
});
If you set the classes .image1 { background-image:url("here") }
and .image2 { background-image:url("here") }
in CSS 如果您在.image1 { background-image:url("here") }
设置类.image1 { background-image:url("here") }
和.image2 { background-image:url("here") }
then apply one to the background element, you could just toggle between the two like this 然后将一个应用于背景元素,您可以像这样在两者之间切换
$('#theButton').click(function(){
$('#background').toggleClass('image1').toggleClass('image2');
});
also, did you know you could have all of those .css
functions on one "line"? 另外,您知道您可以将所有这些.css
函数放在一个“行”上吗?
$('.this').css({
'color':'green',
'border':'1px solid black',
'position','absolute'
});
You're missing the point of jQuery if you're coding like that 如果您像这样进行编码,那么您会错过jQuery的要点
Try this. 尝试这个。 Have only one button with the id aChange
. 只有一个ID为aChange
按钮。
jQuery(function() { jQuery('#aChange').click(function() { var text = jQuery('#aChange').val(); if (text == "Zoom In") { jQuery("#test").css("background-image", "url(image-B.gif)"); jQuery("#test").css("background-position", "50px -100px"); jQuery("#test").css("background-repeat", "no-repeat"); jQuery("#test").css("background-size", "cover"); } else { jQuery("#test").css("background-image", "url(image-A.gif)"); jQuery("#test").css("background-position", "50px 0"); jQuery("#test").css("background-repeat", "no-repeat"); jQuery("#test").css("background-size", "cover"); } jQuery('#aChange').val(text == "Zoom In" ? "Zoom Out" : "Zoom In"); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="aChange" type="button" value="Zoom In">
$('.Zoom').click(function(){
var $this = $(this);
$this.toggleClass('Zoom');
if($this.hasClass('Zoom')){
$this.text('Zoom');
$("html").css("background-color","yellow");
} else {
$this.text('Zoom Out');
$("html").css("background-color","green");
}
});
If I understood well, this may help you. 如果我理解很好,这可能会对您有所帮助。 Check it out: http://jsfiddle.net/V4u5X/703/ 检查一下: http : //jsfiddle.net/V4u5X/703/
You could do this with minimal jQuery and a bit of CSS. 您可以使用最少的jQuery和一点CSS来实现。 See the following. 请参阅以下内容。
$("button").on("click", function() { $("body").toggleClass("img2"); $(this).text(function(i, text) { return text.indexOf("In") !== -1 && "Zoom Out" || "Zoom In"; }); });
body { width: 100%; height: 100%; background-image: url("http://news.bbcimg.co.uk/media/images/76132000/jpg/_76132132_z3551404-blue_morpho_butterfly-spl.jpg"); background-position: 50px 0; background-repeat: no-repeat; background-size: cover; } body.img2 { background-image: url("http://wallerz.net/wp-content/uploads/2014/10/4049_butterfly.jpg") }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Zoom In</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.