图像过滤器

时间：2018-09-23 00:10:41

标签： javascript imagefilter

我是Web开发的新手。我正在尝试创建我的摄影网页。我已经创建了一个基本的html设计。 单击特定按钮时，我想过滤图像。我经历了有关w3schools的代码，但并不清楚。不适用于JQuery。 这是我的带有按钮的html代码。 谢谢

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gallery</title>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <script src="script.js"></script>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')">ALL</button>
    <button class="btn active" onclick="filterSelection('all')">Nature</button>
    <button class="btn active" onclick="filterSelection('all')">Animal</button>

  </div>
  <!--grid-->
  <div class="row">
    <div class="column_nature">
      <div class="content">
        <img src="images/nature.jpg" style="width:40%">
        <h4>Nature</h4>
        <p>This is me</p>
      </div>
    </div>
  </div>

  <div class="column_nature">
    <div class="content">
      <img src="images/swan.jpg" style="width:40%">
      <h4>Swan</h4>

    </div>
  </div>


</body>

</html>

2 个答案:

答案 0 :(得分：0)

由于您的两个图像都具有“自然”特性，因此滤镜不会产生任何效果。我将代码修改为w3schools example，但对其进行了更改，以使第一个图像具有“自然”作为过滤器，第二个图像具有“鸟状”作为过滤器。

顺便说一句，列和过滤器名称之间没有下划线（如果您像在代码中那样放入一个，则不会）。我也改过了。

祝你好运

/*this goes in your script.js*/

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
/*this bit will go into your style.css file*/

* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Arial;
}

/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide columns by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gallery</title>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <script src="script.js"></script>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')">ALL</button>
    <button class="btn active" onclick="filterSelection('nature')">Nature</button>
    <button class="btn active" onclick="filterSelection('bird')">Animal</button>

  </div>
  <!--grid-->
  <div class="row">
    <div class="column nature">
      <div class="content">
        <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg" style="width:40%">
        <h4>Nature</h4>
        <p>This is me</p>
      </div>
    </div>
  </div>

  <div class="column bird">
    <div class="content">
      <img src="https://www.phrases.org.uk/images/swan-song-1.jpg" style="width:40%">
      <h4>Swan</h4>

    </div>
  </div>


</body>

</html>

答案 1 :(得分：0)

我了解您是编程新手。因此请注意，有些用户可能会为您提供建议您安装jQuery或Bootstrap的答案-尽管这完全正确，并且我会建议您这样做-我同样理解这些为初学者提供了陡峭的学习曲线。

这样，您就可以使用HTML，CSS和裸露的JavaScript库进行开发。因此，我在下面的代码中提供了解决您的问题的方法，并记录了我的代码，以便您可以更好地理解它。

用我的代码替换您的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<script src="script.js"></script>
<div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('All')">ALL</button>
    <button class="btn active" 
 onclick="filterSelection('Nature')">Nature</button>
    <button class="btn active" 
 onclick="filterSelection('Swan')">Animal</button>

</div>
<!--grid-->
<div class="row">
    <div class="column_nature filter" id="Nature">
        <div class="content">
            <img src="images/nature.jpg" style="width:40%">
            <h4>Nature</h4>
            <p>This is me</p>
        </div>
    </div>
</div> 

 <div class="column_nature filter" id="Swan">
<div class="content">
            <img src="images/swan.jpg" style="width:40%">
            <h4>Swan</h4>

        </div>
    </div>

    </div>
   <script>
   // Function to hide all other elements, bar the parameter provided
    function filterSelection(elementToShow){
    if(elementToShow != "All"){ 
    // Get an array of elements with the class name, filter.
    var x = document.getElementsByClassName("filter");
    // For each of them
    for(var i = 0; i < x.length; i++){
    // Make them invisible
    x[i].style.display = "none";
    }
    // Get and then make the one you want, visible
    var y = document.getElementById(elementToShow).style.display = "block";
    }
    else{ // If the parameter provided is all, we want to display everything
    // Get an array of elements with the class name, filter.
    var x = document.getElementsByClassName("filter");
    // For each of them
    for(var i = 0; i < x.length; i++){
    //Make them visible
    x[i].style.display = "block";
    }
    }

    }
    </script>
  </body>   
  </html>

请注意以下几点；如果添加新按钮来过滤其他内容，则必须给它一个* onclick =“ filterSelection（'x'）” *，其中x是您要过滤的按钮的名称。然后在要保留的div上，只需给它提供一个与“ x”同名的类。

例如，如果我有一个按钮：

<button onclick="filterSelection('Mountains')">Mountains</button>

然后，我希望如果单击它，则将隐藏所有过滤器类div，但具有山类的div除外。因此，我必须像这样设置div：

<div class="filter Mountains">This would be the div that would be displayed on click of the above button, and all others would be hidden.</div>

我希望这有助于为您提供所需的答案，尽管最终最好还是考虑Bootstrap或jQuery，它们从长远来看将更加可持续。

相关问题
最新问题