Question

我正在使用Backstretch jQuery plugin创建全屏幕背景图片，但有一页滚动网站，并希望根据活动的内容div更改背景图片。

有多种方法可以滚动到网站上的每个面板，包括方向按钮，单击面板，从nab菜单中选择链接，因此需要能够在不同的地方调用此功能。

目前，该网站将“活动”类添加到为CSS样式选择的div中，然后滚动到该位置。实际上，我需要将路径更改为$ .backstretch（“http://example.com/assets/image.jpg”）;当活动面板发生变化时我想运行一个函数来将背景图像交换到某些面板的特定路径，否则当不是某个特定面板时从小数组中选择一个随机图像。

我的直觉是使用switch语句，但需要请求帮助。

这是一个WordPress网站，面板是动态输出的，所以我不能硬编码这个;它需要以与活动面板选择当前工作相同的方式处理id和hash标签。

我目前的JS代码如下所示。我对JS不是很称职，所以我很欣赏可能有更有效的方法来安排这段代码，但我目前的技能水平限制了我。

非常感谢您提供的任何帮助。

jQuery(function( $ ){ 
                $.easing.elasout = function (x, t, b, c, d) {
                    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
                };

                $.backstretch("http://example.com/assets/image.jpg");

                $('#content').scrollTo( 0 );
                $.scrollTo( 0 );

                $('.menu a').click(function(e){
                    e.preventDefault();
                    var link = e.target;
                    link.blur();
                    if( link.title )
                        $(this).parent().find('span.message').text(link.title);
                });

                // clicking from menu   
                $('.menu a').click(function(){
                        $target = $(this.hash); 
                    $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');           
                    return false;
                });

                //clicking on a panel
                $('.panel').click(function(){
                        $target = $(this); 
                    $.scrollTo( $target, 1000, { easing:'elasout', offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                    $target.addClass('active');
                    return false;
                });

                // click on up button
                $('#verticals a.up').click(function(){
                    if ( $('div.panel.active').prev('div.panel').length){
                        $target = $('div.panel.active').prev();
                        $.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on down button
                $('#verticals a.down').click(function(){
                    if ( $('div.panel.active').next('div.panel').length){
                        $target = $('div.panel.active').next();
                        $.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on right button
                $('#horizontals a.right').click(function(){
                    if ( $('div.panel.active').parent().next('div.col').length){
                        $target = $('div.panel.active').parent().next('div.col').children('div:nth-child(1)');
                        $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on left button
                $('#horizontals a.left').click(function(){
                    if ( $('div.panel.active').parent().prev('div.col').length){
                        $target = $('div.panel.active').parent().prev('div.col').children('div:nth-child(1)');
                        $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                $(document).ready(function(){

                    $('.menu li').hover(
                        function () {
                            $('ul', this).slideDown(200);
                            $('ul', this).parent().addClass('active');
                        }, 
                        function () {
                            $('ul', this).slideUp(200);
                            $('ul', this).parent().removeClass('active');      
                        }
                    );

                    $('.panel').tinyscrollbar();

                    $("#key-facts").fadeTransition();

                });

            });

Answer 1

最终到达那里。在这里，任何人都会发现这一点以寻求安慰：

var a = [
  ['115', 'filename.jpg'],  
  ['148', 'filename.jpg'], 
  ['150', 'filename.jpg'], 
  ['153', 'filename.jpg'],
  ['155', 'filename.jpg'],
  ['157', 'filename.jpg'] 

   // ... etc, continue as required
]

function setBackground(id){
  for (var i = 0; i < a.length; i++){
   if (a[i][0] == id){
    $.backstretch('http://insert base URL here' + a[i][1]);
    return;
   }
  }
    var aRandom = [
     'filename.jpg', 
     'filename.jpg'
    ]

 // array of images for id with undefined image to be randomly selected from

    var b = aRandom[Math.floor(Math.random()*aRandom.length)];
  $.backstretch('http://insert base URL here' + b);
}

更改活动div时交换后伸图像

1 个答案: