页脚随图像变化而切换

Question

感谢您给我这个帮助的机会。

我想创建一个切换页脚（幻灯片面板）。

我发现下面的代码运行良好，但我希望能够在面板滑动时更改图像：打开和关闭时的图像不同（向上箭头-->向下箭头）。

我应该如何将此函数与此代码集成？

非常感谢！

这是代码：

<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>

Answer 1

您可以通过更改图像源来更改图像：

$('.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)相同