Question

我正在使用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值改变了，但图像似乎仍然存在。

有什么想法吗？

Answer 1

您可以使用jQuery的{{1}}：

$(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"); } });，请参阅this documentation。

完整代码：

$(document).ready(...);

希望这有帮助！

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

1 个答案: