화면이 작아지면 parallax.js 이미지를 제거하십시오.

parallax.js을 사용하여 제 웹 사이트에 시차 효과를 추가하고 있습니다. 화면 크기가 767 픽셀보다 작 으면 data-image-src 속성을 제거하고 싶습니다.화면이 작아지면 parallax.js 이미지를 제거하십시오.

나는 내 CSS 파일에 @media screen and (max-width: 767px) {...}을 사용해야한다는 것을 알고 있지만 이미지 속성을 none으로 설정하는 방법을 알 수 없다. 내하는 index.js 내부

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

내가 다음 jQuery 코드를 제안하지만이 작동하지 않는 것 linusg로 추가 : 여기

은 예입니다.

$(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); }); });

데이터 이미지 src 값이 변경 되더라도 이미지는 여전히 거기에있는 것처럼 보입니다.

아이디어가 있으십니까?

출처

2016-09-18 Panos

내 대답을 보았습니까? 작동합니까? – linusg

js 파일에 코드를 추가했는데 작동하지 않는 것 같습니다. 나는 $ (document) .ready (function() {})를 추가했다. 하지만 여전히 아무것도. 그건 그렇고 콘솔에 오류가 없습니다. – Panos

오, 당신이 내 뜻을 오해했습니다. D. 내 게시물을 수정하겠습니다. HTML에 jQuery가 포함되어 있는지 확인하십시오. – linusg

당신은이에 대한 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>

희망!

출처

2016-09-18 09:45:02 linusg

화면이 작아지면 parallax.js 이미지를 제거하십시오.

답변

관련 문제