4

如何在 jQuery 中的两个 PNG 图像之间制作动画？这可能吗？

当您在一种颜色到另一种颜色之间转换时，类似于 CSS 3 的转换，但我需要图像到图像的转换。

4

3 回答 3

3

查看 Jack Moore 的这个插件，名为jQuery Blend。

编辑：Opps 两张图片，对不起。那么这个插件呢？

好的，如果你对插件不满意，那么试试这个。我在这里发布了一个演示。

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-23T15:15:10.800 回答
2

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

于 2010-01-23T14:34:35.627 回答
1

当您说“在两个图像之间制作动画”时，您的意思是您希望它们彼此淡入淡出吗？

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

  1. 将图像 B（隐藏）放在图像 A 后面（例如，通过将图像 B 的 z-index 设置为 10，将图像 A z-index 设置为 20）

  2. 使用 .show() 显示图像 B [它仍将隐藏在 A 后面]

  3. 使用 .fadeOut() 淡出图像 A

重复 1-3 开关 A 和 B

如果您希望此动画持续进行，您可以使用 window.setInterval() 每隔一段时间运行一次代码。您可以有一个存储 A 或 B 的变量 current_bg 来跟踪您应该以哪种方式进行切换。

于 2010-01-23T15:57:15.463 回答