Добавление изменения размера окна в мой Javascript
Я создаю свое портфолио фотографий и хочу использовать горизонтальный непрерывный слайдер на больших экранах, но складывать изображения на небольших мобильных устройствах. Я пытаюсь заставить свой javascript реализовывать ТОЛЬКО после определенного размера экрана 768 пикселей. Мне удалось сделать это, используя приведенный ниже код, но для того, чтобы эти изменения вступили в силу, браузер необходимо каждый раз перезагружать, и я хочу, чтобы эти изменения происходили по мере изменения размера браузера.
< script >
if ($(window).width() > 768) {
$(function () {
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td></td>");
$("body").mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
} < /script>
Я могу заставить это работать именно так, как мне бы хотелось, добавив впоследствии этот скрипт.
<script>
$(window).resize(function() {
location.reload();
});
Но это беспорядочное решение, и браузер мигает по мере изменения размера окна из-за непрерывных перезагрузок. Как я могу объединить 2 части JavaScript? чтобы найти лучшее решение ...
HTML, включая быстрый базовый стиль ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>DGP Portfolio</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: #fff;
}
.box{
position: relative;
width: 100%;
margin-top: 20px;
}
.first{
margin-top: 80px;
}
.image {
width: 100%;
}
h1 {
position: fixed;
display: block;
top: 0;
width: 320px;
left: 50%;
margin: 30px 0 0 -160px;
font-family: Helvetica, sans-serif;
font-size: 1.2rem;
text-align: center;
color: #000;
}
@media only screen and (min-width: 768px) {
h1 {
width: 530px;
margin: 60px 0 0 -265px;
font-size: 2rem;
}
tr {
vertical-align: top;
}
.box{
position: relative;
width: 80vw;
margin-top: 150px;
}
.first{
margin-top: 150px;
}}
@media only screen and (min-width: 1000px) {
.image {
max-width: 800px;
max-height: 800px;
}
.box{
width: 800px;
}}
</style>
<!--HELP HERE PLEASE - HOW SHOULD THIS BE RE WRITTEN ????-->
<!--HELP HERE PLEASE - HOW SHOULD THIS BE RE WRITTEN ????-->
<!--HELP HERE PLEASE - HOW SHOULD THIS BE RE WRITTEN ????-->
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src = "jquery.mousewheel.js"></script>
<script>
if ( $(window).width() > 768) {
$(function(){ $("#page-wrap").wrapInner("<table cellspacing='30'><tr>"); $(".box").wrap("<td></td>"); $("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault(); });
});
}
</script>
<!--HELP HERE PLEASE - WITHOUT NEEDING THIS ????-->
<!--HELP HERE PLEASE - WITHOUT NEEDING THIS ????-->
<!--HELP HERE PLEASE - WITHOUT NEEDING THIS ????-->
<script>
$(window).resize(function() {
location.reload();
});
</script>
</head>
<body>
<h1>DAN GOLDSMITH PHOTOGRAPHY</h1>
<div id = "page-wrap">
<div class = "box first">
<img class = "image" src = "img/red1.jpg">
</div>
<div class = "box">
<img class = "image" src = "img/green2.jpg">
</div>
<div class = "box">
<img class = "image" src = "img/purple3.jpg">
</div>
<div class = "box">
<img class = "image" src = "img/red1.jpg">
</div>
<div class = "box">
<img class = "image" src = "img/green2.jpg">
</div>
<div class = "box">
<img class = "image" src = "img/purple3.jpg">
</div>
</div>
</body>
</html>
Извините, место в сценарии было опечаткой
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете сделать это, определив свою функцию, а затем добавив в окно слушателя событий. Таким образом, вы можете вызывать свою функцию при загрузке, изменении размера и даже прокрутке, если хотите:
function doStuff() {
if ($(window).width() > 768) {
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td></td>");
$("body").mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
};
});
window.addEventListener("load", doStuff);
window.addEventListener("resize", doStuff);
window.addEventListener("scroll", doStuff);
Я пытался реализовать ваш код, но не смог заставить его работать. Я просто вставил html в исходный текст. Если вы используете это и у вас есть 3 изображения с пометками: red1.jpg, green2.jpg и purple3.jpg, все размером 1200 пикселей на кв. Пока вы лучше поймете, чего я хочу достичь с помощью этого кода - он действительно работает, но Я знаю, что javascript - беспорядок.
Выполняйте скрипт только при достижении > 768 (так что раньше было <= 768) примерно так:
<script>
var before = $(window).width();
$(window).resize(function() {
if ($(window).width() > 768 && before <= 768) {
//$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
//$(".post").wrap("<td></td>");
//$("body").mousewheel(function (event, delta) {
// this.scrollLeft -= (delta * 30);
// event.preventDefault();
//});
alert('> 768px reached');
}
before = $(window).width();
}
</script>
JSFiddle здесь: https://jsfiddle.net/r578nbfj/1/
Спасибо за помощь!
Я пытался реализовать ваш код, но не смог заставить его работать. Я просто вставил html в исходный текст. Если вы используете это и у вас есть 3 изображения с пометками: red1.jpg, green2.jpg и purple3.jpg, все размером 1200 пикселей на кв. Пока вы лучше поймете, чего я хочу достичь с помощью этого кода - он действительно работает, но Я знаю, что javascript - беспорядок.
Отредактировал свой ответ скрипкой, при изменении размера он работает! Пожалуйста, попробуйте, он работает для вашего вопроса об изменении размера экрана.
Я не уверен, что
< script >работает, будьте осторожны, чтобы правильно использовать теги, такие как<script>.