Question

我正在构建我的摄影作品集，并希望在大屏幕上使用水平连续滑块，但将图像堆叠在较小的移动设备上。我试图让我的javascript仅在定义的屏幕大小为768px后实现。我已经设法使用下面的代码执行此操作但是为了使这些更改生效，浏览器每次都需要重新加载，我希望这些更改在浏览器重新调整大小时发生。

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

Answer 1

您可以通过定义函数然后向窗口添加事件侦听器来完成此操作。这样，您可以在加载时调用您的函数，调整大小，甚至滚动，如果您愿意：

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);

Answer 2

只有在> 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/

添加窗口调整大小到我的Javascript

2 个答案: