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背景圖像動畫

回答

相關問題