Question

如何在jQuery中的两个PNG图像之间进行动画处理？这可能吗？

当你在一种颜色到另一种颜色之间转换时，类似于CSS 3转换，但是我需要一个图像来进行图像转换。

Answer 1

请查看Jack Moore的这个插件jQuery Blend。

编辑：对不起两张图片，对不起。那么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();
})

Answer 2

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

Answer 3

当你说“两幅影像之间的动画”时，你的意思是你希望它们相互淡化吗？

我认为你要做的就是创建两个在主要内容下浮动的div（使用z-index），然后在它们之间淡出：

放置图片B（隐藏）在图像A后面（例如，通过将图像B的z-index设置为10 和图像a z-index到20）
使用.show（）显示图像B [它仍会隐藏在A后面]
使用.fadeOut（）

重复1-3开关A和B

如果您希望此动画继续，您可以使用window.setInterval（）来经常运行代码。您可以使用存储A或B的变量current_bg来跟踪切换的方式。

jQuery背景图像动画

3 个答案: