Jquery 使用鼠标单击更改背景图像
我正在实施一个网站,我想改变点击背景图像,但很容易,像淡入淡出或任何东西 onclick部分是用Jquery实现的,但我正在努力解决易用部分 我在网上搜索过这个问题,但每个解决方案都只在页面的一小部分使用div 我的问题是,我将这些div作为一个完整的页面使用,100%的宽度和高度,并且在div前面有内容 我曾考虑过使用精灵并设置背景位置的动画,但这并没有帮助,因为我希望我的页面能够响应,并且我的背景url上有百分比,精灵需要你声明固定宽度(如果我错了,请纠正我) 另外,我必须补充的是,在div后面还有一个div,所以改变不透明度解决方案是没有帮助的。我正在实现这样一个站点: HTML: Jquery:Jquery 使用鼠标单击更改背景图像,jquery,html,css,fadein,easing,Jquery,Html,Css,Fadein,Easing,我正在实施一个网站,我想改变点击背景图像,但很容易,像淡入淡出或任何东西 onclick部分是用Jquery实现的,但我正在努力解决易用部分 我在网上搜索过这个问题,但每个解决方案都只在页面的一小部分使用div 我的问题是,我将这些div作为一个完整的页面使用,100%的宽度和高度,并且在div前面有内容 我曾考虑过使用精灵并设置背景位置的动画,但这并没有帮助,因为我希望我的页面能够响应,并且我的背景url上有百分比,精灵需要你声明固定宽度(如果我错了,请纠正我) 另外,我必须补充的是,在div
jQuery(document).ready(function($){
$("#feauture3_1").click(function(){
$("#feauture3").css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")');
});
$("#feauture3_2").click(function(){
$("#feauture3").css('background-image','url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")')
});
$("#feauture3_3").click(function(){
$("#feauture3").css('background-image','url("http://b296d35169b22ec514a7-3f0e5c3ce41f2ca4459ddb89d451f8d9.r21.cf2.rackcdn.com/wp-content/uploads/2012/11/Kawasaki-Z1-by-Ac-Sanctuary-.jpg")')
});
$("#feauture3_4").click(function(){
$("#feauture3").css('background-image','url("http://4.bp.blogspot.com/-ar4zyO_Ws4M/UekF8jk7nRI/AAAAAAAA1q4/ugQZlRGTLkk/s1600/Kawasaki-Z-1000-.jpg")')
});
});
小提琴:
谢谢你抽出时间
编辑:我最终使用了一个简单的$
(“#feauture3”).css('background-image','url(“image”))
并为与图像匹配的整个div设置了一个背景色(真实的项目没有摩托车作为图像)。这是可以接受的,我使用了这个解决方案。
css转换如何
#feauture3 {
position: fixed;
height: 100%;
width: 100%;
background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
left:0;
background-size: cover;
background-color:#e18764;
color:red;
-webkit-transition:all 1.4s ease-in-out;
-o-transition:all 1.4s ease-in-out;
-moz-transition:all 1.4s ease-in-out;
}
试试这个我们可以将这些问题分为几个部分:
#feauture3 {
position: fixed;
height: 100%;
width: 100%;
background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
left:0;
background-size: cover;
background-color:#e18764;
color:red;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
-moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
-o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
$("<img>").attr('src', 'http://picture.de/image.png').load(function() {
$(this).remove();
$('body').css('background-image', 'url(http://picture.de/image.png)');
});
$(“
玩弄
关于图像加载的问题尝试对您的功能执行此操作:
$("#feauture3_2").click(function(){
$("#feauture3").css({
'background-image' : 'url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")',
'opacity': 0
})
.animate({
'opacity': 1
}, 800);
});
只需将其应用于每个单击事件。试试这个
演示
在图像更改之前添加.fadeOut()
,然后使用setTimeout()
再次添加.fadeIn()
JQUERY
下面是两个外部图像加载后正确加载的修复测试-
jQuery(document).ready(function($){
var img1 = 'http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg',
img2 = 'http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg',
target = $('#feauture3');
$("#feauture3_1").click(function(){
target.fadeOut(1000, function(){
target.css('background-image', 'url('+img1+')');
target.fadeIn(500);
});
});
$("#feauture3_2").click(function(){
target.fadeOut(1000, function(){
target.css('background-image', 'url('+img2+')');
target.fadeIn(500);
});
});
})我相信这可能就是你想要的-
在转换之前将所有图像加载到彼此的顶部不会创建您所说的“flash”。回答很好,但我忘了告诉您我还有其他div,我想更改其背景。因此,这显示了以前的div。我正在实现这样的站点。只需指定您的目标。同样的原则适用于是的。回答很好,但在单击时会闪烁图像。我想要一个完美的过渡!谢谢你的时间。它闪烁是因为你的CSS和jquery没有优化。我只是给了你它如何工作的想法。这取决于你如何使用它。不,它闪烁是因为它要求一个图像链接:)如果没有更好的显示,我会使用它。我最终使用了使用了转换,但检查了我在原始帖子中对我所做的编辑。我不明白js黑客如何应用于我的代码,尽管我需要转换为非flash。因为在加载背景图像之前,用户看不到转换效果,所以必须在浏览器完成加载图像后应用src属性。如果用户在缓存中没有图像,则简单第一次看不到过渡不,你不明白。我不使用图像标签来使用你粘贴的代码。创建此img只是为了预加载图像。我不使用此图像!谢谢,但它显示了我要更改其背景的div后面的div。检查我问题的链接。谢谢你的时间。你也可以处理背景颜色根据你的要求,我建议你使用一个旋转木马插件。我昨天偶然发现了这个链接,我会尝试一下。虽然它应该在图像前面有内容,这就是为什么我使用背景图像url的原因。如果这个div是父div,那么显示图像应该没什么关系你会考虑使用第三方插件,而不是作为背景图像,现在它太复杂了,因为真正的项目非常大,现在它是在线的,我从一开始就无法部署它。我最后使用了一个简单的$(“yf.futuUR3”)。CSS(“后台-图像”,“URL(图像)))并为整个div设置一个与图像匹配的背景色(真实的项目没有摩托车作为图像)。这是可以接受的,我使用了它。
$("#feauture3_2").click(function(){
$("#feauture3").css({
'background-image' : 'url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")',
'opacity': 0
})
.animate({
'opacity': 1
}, 800);
});
$("#feauture3_1").click(function(){
$("#feauture3").fadeOut(1000);
setTimeout(function() {
$("#feauture3")
.css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")')
.fadeIn(1000);
}, 1000);
});
jQuery(document).ready(function($){
var img1 = 'http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg',
img2 = 'http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg',
target = $('#feauture3');
$("#feauture3_1").click(function(){
target.fadeOut(1000, function(){
target.css('background-image', 'url('+img1+')');
target.fadeIn(500);
});
});
$("#feauture3_2").click(function(){
target.fadeOut(1000, function(){
target.css('background-image', 'url('+img2+')');
target.fadeIn(500);
});
});