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)相同

页脚切换与更改图像

1 个答案: