Question

您好我需要使用“查看360”按钮模仿此网站功能：http://www.designrattan.co.uk/daybed/apple

我已经得到了360脚本，它只是我不能解决的问题吗？

我在这里尝试过： http://designliving.tk/winchester-rattan-garden-round-table-set

但是你可以看到一些错误。

单击按钮时我需要更改DIV，但每次点击时我也需要更改按钮（从“视图360”到“查看图像”）。

除此之外，我需要我的照片标签中的图像才能将div和按钮更改回“查看360”

我认为我有JavaScript但我不知道如何将其与HTML结合使用

$('.yourButton').bind('click',function(){
if (!$('.yourButton').hasClass('dragMode')) {
    $('.yourButton').addClass('dragMode');
    $('.yourButton').attr('value')="Drag [...]";
} else { // if in drag mode
    $('.yourButton').removeClass('dragMode');
    $('.yourButton').attr('value')="View 360";
}
});

$('.yourTabImages').bind('click',function(){
if ($('.yourButton').hasClass('dragMode')) {
    $('.yourButton').removeClass('dragMode');
    $('.yourButton').attr('value')="View 360";
}
});

我希望这一切都有意义！

谢谢大家！

Answer 1

如果使用jquery，可以通过以下方式轻松实现：

$('.yourButton').bind('click',function(){
    if (!$('.yourButton').hasClass('dragMode')) {
        $('.yourButton').addClass('dragMode');
        $('.yourButton').attr('value')="Drag [...]";
    } else { // if in drag mode
        $('.yourButton').removeClass('dragMode');
        $('.yourButton').attr('value')="View 360";
    }
});

$('.yourTabImages').bind('click',function(){
    if ($('.yourButton').hasClass('dragMode')) {
        $('.yourButton').removeClass('dragMode');
        $('.yourButton').attr('value')="View 360";
    }
});

这样，您可以在选择处理click事件时要调用的方法时验证按钮所处的模式。希望这有帮助

Answer 2

不要实现自己的代码，这需要时间。使用你喜欢的任何插件： http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/#.T_wDU5GFp9g

单击更改按钮和div

2 个答案: