jQuery背景图像动画

如何在jQuery中的两个PNG图像之间创建动画？这可能吗？jQuery背景图像动画

当你在一种颜色到另一种颜色之间转换时，就像CSS 3转换一样，但是我需要图像转换到图像。

2010-01-23 Tower

退房这个插件杰克·摩尔称为jQuery Blend。

编辑：Opps两个图像，对不起。那么this plugin呢？

好的，如果你对插件不满意，那么试试这个。我发布了一个demo here。

CSS/HTML

<style type="text/css"> 
.wrap { 
margin: 50px auto; 
width: 200px; 
height: 200px; 
background: #555; 
position: relative; 
} 
.display1, .display2 { 
position: absolute; 
top: 0; 
left: 0; 
} 
</style> 
<div class="wrap"> 
<div class="display1"></div> 
<div class="display2"></div> 
</div>

脚本

$(document).ready(function(){ 
var bkgImgs = ([ 
    ['http://i50.tinypic.com/2iiz9cm.gif', 86, 86], 
    ['http://i45.tinypic.com/dop26e.png', 128, 128], 
    ['http://i48.tinypic.com/xcosnq.png', 64, 64] 
]); 
var delay = 5000; 
var transition = 1000; 

var i = 0; 
var l = bkgImgs.length-1; 
imgs = function(x){ 
    return { 
    background: 'url(' + bkgImgs[x][0] + ') no-repeat center center', 
    width:  bkgImgs[x][1], 
    height:  bkgImgs[x][2], 
    left:  $('.wrap').width()/2 - bkgImgs[x][1]/2, 
    top:  $('.wrap').height()/2 - bkgImgs[x][2]/2 
    } 
} 
next = function(){ 
    var oldpic = imgs(i); 
    i++; 
    if (i > l) i = 0; 
    var newpic = imgs(i); 
    $('.display2').css(oldpic).show(); 
    $('.display1').hide().css(newpic).fadeIn(transition); 
    $('.display2').fadeOut(transition); 
    setTimeout(function(){ next() }, delay); 
} 
next(); 
})

来源

2010-01-23 15:15:10 Mottie

它不混合两个图像。它在纯色图层下面有一个图像，用于制作此“混合”动画。 – Tower 2010-01-23 15:18:38

Opps，由于某种原因，我没有阅读“两个图像” – Mottie 2010-01-23 15:23:15

我添加了一些代码......它几乎完成了约旦描述的内容。 – Mottie 2010-01-23 17:04:29

这可能帮助：http://snook.ca/archives/javascript/jquery-bg-image-animations/

来源

2010-01-23 14:34:35

它不会在两个图像之间生成动画，它所做的只是将一个图像移动到另一个图像上。 – Tower 2010-01-23 14:49:10

当你说 “两个图像之间的动画” 你的意思是你希望他们消失在彼此？

我想你会做（使用的z-index）基本上是创建两个div漂浮主要内容的下面是什么，然后通过它们之间的褪色：

把图像B（隐藏）图像A（比方说，由图像B的z索引设置为10 和图像A的z-index至20）
使用.show（）表示图像B后面[它仍然会甲背后隐藏]
淡出图像A使用.fadeOut（）

重复1-3开关A和B

如果你想这个动画是持续的，你可以使用window.setInterval（）来运行代码每隔一段时间。你可以有一个变量current_bg，用于存储A或B以跟踪应该切换的方式。

来源

2010-01-23 15:57:15

好的。你认为将来会有jQuery实现还是CSS实现，允许图像到图像动画？我可以等待它......或者现在做一个骇人的尝试来实现它。 – Tower 2010-01-23 18:24:06

jQuery背景图像动画

回答

相关问题