单击时切换可扩展背景

Toggle Expandable background on Click

本文关键字：可扩展 背景 单击      更新时间：2023-09-26

我想创建一个链接;例如。"点击这里查看后台演示"。然后单击链接;然后，网页的背景将显示一个图像，并且该图像是可展开的。

我有一个独立的可扩展背景解决方案;使用下面。

但是我怎么可能只显示"点击"; 实现。

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

你有以下resize处理程序

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

如果您想在单击链接时调用它，则可以使用

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

只需将click给定的代码放在theWindow.resiz处理程序之后/之前即可。还要确保你有一个带有类link的a标签，比如

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

并从resize处理程序中删除.trigger("resize");以停止在加载时调用处理程序。

相关文章：