Я хотел бы создать ссылку; например. 'Нажмите здесь, чтобы посмотреть фоновое демо. Затем нажмите ссылку; фон веб-страницы затем отобразит изображение, и это изображение будет расширяемым.
У меня есть расширяемое фоновое решение на отдельном уровне; используя приведенное ниже.
Но как я мог показывать только "на клик"; для внедрения.
<!--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="/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
. Также убедитесь, что у вас есть a
тег с классом link
, как
<a href="#" class="link">Click</a>
И удалите .trigger("resize");
из обработчика resize
чтобы остановить обработчик, вызванный onload.