Переключить расширяемый фон при нажатии

Question

Переключить расширяемый фон при нажатии

0

Я хотел бы создать ссылку; например. 'Нажмите здесь, чтобы посмотреть фоновое демо. Затем нажмите ссылку; фон веб-страницы затем отобразит изображение, и это изображение будет расширяемым.

У меня есть расширяемое фоновое решение на отдельном уровне; используя приведенное ниже.

Но как я мог показывать только "на клик"; для внедрения.

<!--Expandable BG code IE 7 +-->

  <style>

                #bg { position: fixed; top: 0; left: 0; }
                .bgwidth { width: 100%; }
                .bgheight { height: 100%; }

                #page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;;  }

  </style> 


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
                $(function() {   
                        var theWindow        = $(window),
                            $bg              = $("#bg"),
                            aspectRatio      = $bg.width() / $bg.height();

                        function resizeBg() {

                                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                                    $bg
                                        .removeClass()
                                        .addClass('bgheight');
                                } else {
                                    $bg
                                        .removeClass()
                                        .addClass('bgwidth');
                                }

                        }

                        theWindow.resize(function() {
                                resizeBg();
                        }).trigger("resize");

                });
        </script>


<!--Expandable BG code IE 7 +-->

No-Spex 22 сен. 2013, в 02:59

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

The Alpha · Accepted Answer · 2013-09-21T23-25-00.000Z

У вас есть обработчик resize

theWindow.resize(function() {
    resizeBg();
}).trigger("resize");

Если вы хотите вызвать его при нажатии на ссылку, вы можете использовать

$('a.link').on('click', function(e){
    e.preventDefault();
    resizeBg();
});

Просто поставьте код, указанный для click после/перед обработчиком theWindow.resiz. Также убедитесь, что у вас есть a тег с классом link, как

<a href="#" class="link">Click</a>

И удалите .trigger("resize"); из обработчика resize чтобы остановить обработчик, вызванный onload.