頁腳切換圖像變化

謝謝你給我機會得到幫助。頁腳切換圖像變化

我想創建一個切換頁腳（滑動面板）。

我發現下面的代碼可以正常工作，但我希望能夠在面板滑動時更改圖像：打開和關閉圖像不同（箭頭向上 - >向下箭頭）。

我應該如何繼續將此功能與此代碼集成？

非常感謝提前！

下面是代碼：

<script type="text/javascript"> 
jQuery(function($) { 
var slide = false; 
var height = $('#footer_content').height(); 
$('#footer_button').click(function() { 
var docHeight = $(document).height(); 
var windowHeight = $(window).height(); 
var scrollPos = docHeight - windowHeight + height; 
$('#footer_content').animate({ height: "toggle"}, 1000); 
if(slide == false) { 
    if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML. 
     $('html').animate({scrollTop: scrollPos+'px'}, 1000); 
    } else { 
     $('html, body').animate({scrollTop: scrollPos+'px'}, 1000); 
    } 
         slide = true; 
} else { 
         slide = false; 
       } 
}); 
}); 
</script>

來源

2012-03-01 Démian Peeters

您可以通過改變圖像源改變圖像：

$('.classOfImage').attr('src','/images/up.png');

您的圖片必須有一流的，你在這裏使用$('.classOfImage')

<img src="/images/firstimage.pmg" alt="My Image" class="classOfImage" />

你可以這樣做，把它整合到你當前的代碼中：

var panel = false;

在你的點擊函數外定義這個變量並設置爲false。

現在這個點擊添加到您函數：

if(!panel){ 
    $('.classOfImage').attr('src','/images/secondimage.png'); 
    panel = true; 
} else if(panel) { 
    $('.classOfImage').attr('src','/images/firstimage.png'); 
    panel = false; 
}

，因爲我可以看到你已經有一個保存這樣的面板狀態的變量，叫slide所以你可以使用它像這樣：

$(function() { 
    var slide = false; 
    var height = $('#footer_content').height(); 

    $('#footer_button').click(function() { 

    var docHeight = $(document).height(); 
    var windowHeight = $(window).height(); 
    var scrollPos = docHeight - windowHeight + height; 

    $('#footer_content').animate({ height: "toggle"}, 1000); 

    if(!slide) { 

     $('.classOfImage').attr('src','/images/secondimage.png'); // LOOK HERE !! 

     if($.browser.opera) { 
      $('html').animate({scrollTop: scrollPos+'px'}, 1000); 
     } else { 
      $('html, body').animate({scrollTop: scrollPos+'px'}, 1000); 
     } 
      slide = true; 

    } else { 

     $('.classOfImage').attr('src','/images/firstimage.png'); // AND HERE !! 

      slide = false; 
    } 

    }); 
});

注：jQuery(function($) {相同$(function() {和if(slide == false)相同if(!slide)

來源

2012-03-01 22:18:06 Fabian

非常感謝Fabian。不幸的是，這段代碼不適合我。只有當我第二次點擊時，圖像纔會改變。而且我希望當切換滑動面板時（沒有任何點擊），圖像會自動改變。你有解決方案嗎？再次感謝你的幫助。 – 2012-03-01 22:44:23

沒有任何點擊是什麼意思？我會在幾分鐘內回覆你，並會爲你發佈一個jsfiddle。 – Fabian 2012-03-01 22:49:53

我認爲你的面板是默認打開的，對吧？所以你必須將'var slide = false;'改成'var slide = true;'。這裏是一個jsfiddle讓你瞭解它是如何工作的。（而不是像我這樣改變文字，你可以改變圖像）http://jsfiddle.net/LHhQu/。如果我可以幫助你，請致信/接受，如果你還有其他問題，請回復我:) – Fabian 2012-03-01 23:06:04

頁腳切換圖像變化

回答

相關問題