当屏幕变小时删除 parallax.js 图像答案

【问题标题】：Remove parallax.js image when screen get's smaller当屏幕变小时删除 parallax.js 图像
【发布时间】：2017-09-26 12:30:31
【问题描述】：

我正在使用parallax.js 在我的网站上添加视差效果。当屏幕尺寸小于 767 像素时，我想删除 data-image-src 属性。

我知道我应该在我的 css 文件中使用 @media screen and (max-width: 767px) {...}，但我就是不知道如何将 image 属性设置为 none。

这是一个例子：

<html>
<head>
<title>Panagiotis Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/circle.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body ng-app="">
    <div ng-include src="'partials/header.html'"></div>

    <div class="parallax-window" data-parallax="scroll" data-image-src="sky.jpg">
      <div class="parallax-content">
          <h3 id="summary">Summary</h3>
          <hr>
          <div ng-include="'partials/summary.html'"></div>
      </div>

    </div>
    <!-- Some other parallax elements here -->
    </body>
 </html>

在我的 index.js 中，我添加了 linusg 建议以下 jQuery 代码，但它似乎不起作用。

$(document).ready(function() {
$(window).resize(function () {
    // Check window size
    if($(window).width() < 767) {
        // Unset data-image-src property
        $(".parallax-window").attr("data-image-src", "");
    } else {
        // Set data-image-src property
        //$(".parallax-window").attr("data-image-src", "sea.jpg");
    }
});

$(document).on('click', 'a:not([target="_blank"])', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700);
});
});

虽然 data-image-src 值发生了变化，但图像似乎仍然存在。

有什么想法吗？

【问题讨论】：

你看到我的回答了吗？有用吗？
我在我的 js 文件中添加了您的代码，但它似乎不起作用。我还添加了 $(document).ready(function(){});但仍然没有。顺便说一句，我在控制台中没有错误。
哦，你误解了我的意思：D。我会编辑我的帖子。确保在 HTML 中包含 jQuery。
我想你误解了我的意思：P。我在 $(document).ready... 中添加了您的代码，就像您编辑答案一样。仍然没有变化，视差图像仍然存在。我还包括了我的 html 中提到的 jquery（实际上已经有了它）。
你用的是什么浏览器？你有错误吗？你使用我发布的相同代码吗？您可以将您正在使用的内容发布到pastebin.com 之类的内容吗？你确定你有 jQuery 吗？

标签： html css parallax.js

【解决方案1】：

您可以为此使用jQuery 的$(window).width()：

$(window).resize(function () {
    // Check window size
    if($(window).width() < 767) {
        // Unset data-image-src property
        $(".parallax-window").attr("data-image-src", "");
    } else {
        // Set data-image-src property
        $(".parallax-window").attr("data-image-src", "sea.jpg");
    }
});

确保将您的代码包装成$(document).ready(...);，如下所示，请参阅this documentation。

完整代码：

<html>
    <head>
        <!-- Other metadata and resources -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="parallax-window" data-parallax="scroll" data-image-src="sea.jpg">
            <div class="parallax-content">
                <h3 id="goals">Ambitions and Goals</h3>
                <hr>
                <div ng-include="'partials/goals.html'"></div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $(window).resize(function () {
                    // Check window size
                    if($(window).width() < 767) {
                        // Unset data-image-src property
                        $(".parallax-window").attr("data-image-src", "");
                    } else {
                        // Set data-image-src property
                        $(".parallax-window").attr("data-image-src", "sea.jpg");
                    }
                });
            });
        </script>
    </body>
</html>

希望这会有所帮助！

【讨论】：