jQuery動畫圖像交換

你好。這是我的又一次，它又是jQuery。jQuery動畫圖像交換

當點擊左邊的這個菜單，然後我想改變這一形象的SRC，或者只是將其交換。不過，我想讓它變成動畫。圖像路徑從DB中獲取，並存儲在「圖像」數組中（您可以使用螢火蟲來檢查）。

感謝

更新：

HTML（）+ PHP：

<div id="content_menu"> 
<ul> 
<?php 
$q = $wpdb->get_results("SELECT * FROM ".$wpdb->prefix."prodcat");         $c = 1;          $id = 1; 
foreach($q as $q) 
{ 
echo '<li class="ml'.$c.'"> 
<a id="e'.$id.'" href="cat/'.$q->id.'">'.$q->name.'</a> 
<img src="images/split.png" alt="" /> 
</li>'; 
$id++; 
$c++; 
if($c == 8) 
{ 
    $c = 1; 
} 
} 
</ul> 
</div> 
<div id="product_display"> 
     <div id="product"> 
       <img id="changer" src="images/ex.jpg" style="background-image: url('images/products/cat/2.png');" alt="Przykład" /> 
       <div id="pmore"><a href="#">Więcej</a></div> 
     </div> 
</div>

JS：

<script type="text/javascript"> 
$(window).bind('load', function() 
{ 
var images = new Array(); 
<?php 
$q = $wpdb->get_results("SELECT id, image FROM ".$wpdb->prefix."prodcat"); 
foreach($q as $q) 
{ 
echo "images[".($q->id-1)."] = 'images/products/cat/".$q->image."';\r\n"; 
} 
?> 
$('#content_menu a').click(function(e){ 
e.preventDefault(); 
var id = this.id.substr(1) % 7; 
var i = this.id.substr(1); 
$('#changer').css('background-image', images[i]); 
switch(id) 
{ 
    case 2: 
     $('#product').animate({ backgroundColor: '#FFCD00' }, 500); 
     $('#pmore').animate({ backgroundColor: '#FFCD00' }, 500); 
    break; 
    case 3: 
     $('#product').animate({ backgroundColor: '#F7A604' }, 500); 
     $('#pmore').animate({ backgroundColor: '#F7A604' }, 500); 
    break; 
    case 4: 
     $('#product').animate({ backgroundColor: '#9A05E8' }, 500); 
     $('#pmore').animate({ backgroundColor: '#9A05E8' }, 500); 
    break; 
    case 5: 
     $('#product').animate({ backgroundColor: '#096EE3' }, 500); 
     $('#pmore').animate({ backgroundColor: '#096EE3' }, 500); 
     break; 
    case 6: 
     $('#product').animate({ backgroundColor: '#24A205' }, 500); 
     $('#pmore').animate({ backgroundColor: '#24A205' }, 500); 
    break; 
    case 0: 
     $('#product').animate({ backgroundColor: '#D41E0C' }, 500); 
     $('#pmore').animate({ backgroundColor: '#D41E0C' }, 500); 
    break; 
    case 1: 
     default: 
     $('#product').animate({ backgroundColor: '#44B2EE' }, 500); 
     $('#pmore').animate({ backgroundColor: '#44B2EE' }, 500); 
} 
$('#changer').cross();

}）; }）;

順便說一句。現在點擊不起作用

來源

2010-07-05 Misiur

我認爲這是一個好主意，張貼你的鱈魚直接在這裏，讓問題自成體系，從而對通過搜索引擎到達的未來路人更有用。那時機會就是，你鏈接的測試頁面不再存在了，這個問題本身就沒有用處。 – Tomalak 2010-07-05 11:43:21

有點像this？

來源

2010-07-05 11:41:00

嗯，我試過了，但是我對它有了新的想法。我會告訴我是否發現任何東西。 – Misiur 2010-07-05 11:48:21

@Misiur

抱歉地說，你發佈的鏈接中包含一個JavaScript syntatic錯誤，它是寫如下

var images = new Array(); 
images[] = 'images/products/cat/1.jpg'; 
images[] = 'images/products/cat/2.png';

我想應該是這樣的

var images = new Array(); 
images[0] = 'images/products/cat/1.jpg'; 
images[1] = 'images/products/cat/2.png';

一些事情

對不起，如果我錯了（或）誤導你

來源

2010-07-05 11:52:56

PHP習慣：D現在更好 – Misiur 2010-07-05 12:03:10

jQuery動畫圖像交換

回答

相關問題