gpt4 book ai didi

jQuery 背景图像动画

转载 作者:行者123 更新时间:2023-12-01 00:09:19 24 4
gpt4 key购买 nike

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

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

最佳答案

看看 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();
})

关于jQuery 背景图像动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2123475/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com