六边形，在CSS HTML JavaScript中单击时更改图片

Hexagon with changing pictures on click in CSS HTML JavaScript

本文关键字：单击 CSS HTML JavaScript 六边形      更新时间：2023-09-26

我是CSS HTML和JavaScrip的新手。我发现这段代码是为了创建带有图片的六边形图案（请参阅第一个代码）。当我按下六边形时，我希望它的图片变成另一张图片（见第二个代码）。

第一个代码：下面是JavaScript，CSS和HTML。

//I don't know how my java script is going to be
/**
 * Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
 * http://stackoverflow.com/q/10062887/1397351
 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.row {
  margin: -18% 0;
  text-align: center;
}
.row:first-child {
  margin-top: -20%;
}
.hexagon {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0 8.5%;
  padding: 16%;
  transform: rotate(30deg) skewY(30deg) scaleX(.866);
  /* .866 = sqrt(3)/2 */
}
.hexagon:before,
.content:after {
  display: block;
  position: absolute;
  /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
  top: 6.7%;
  right: 0;
  bottom: 6.7%;
  left: 0;
  /* 6.7% = (100% -86.6%)/2 */
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
  /* 1.155 = 2/sqrt(3) */
  background-color: rgba(30, 144, 255, .56);
  background-size: cover;
  content: '';
}
t:after {
  content: attr(data-content);
}
.row:first-child .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/o0vmcz3hl/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:nth-child(2):before {
  background-image: url(http://s10.postimg.org/n7j0kcxgp/Untitled_2_0.jpg);
}
.row:nth-child(3) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/pen98a2qx/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:nth-child(2):before {
  background-image: url(http://s10.postimg.org/ivuevcqjt/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/dvwynekx5/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg);
}
.row:nth-child(5) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/i7lkceru1/Untitled_2_0.jpg);
}
<!-- content to be placed inside <body>…</body> -->
<div class='row'>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
</div>

第二个代码：下面是JavaScript，CSS和HTML。

var bodyObj, className, index;
bodyObj = document.getElementById('body');
index = 1;
className = [
  'imageOne',
  'imageTwo'
];
function updateIndex() {
  if (index === 0) {
    index = 1;
  } else {
    index = 0;
  }
}
bodyObj.onclick = function(e) {
  e.currentTarget.className = className[index];
  updateIndex();
}
html,
body,
#body {
  height: 100%;
  width: 100%;
}
#body.imageOne {
  background-image: url("http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg");
}
#body.imageTwo {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");
}
<div id="body" class="imageOne"></div>

结果： jsfiddle

我添加了

一个新的类.hexagon-hide（与.hexagon相同，但背景图像不同），然后我添加了JQuery函数，只需单击hexagondiv即可在.hexagon和.hexagon-hide之间切换。

$( ".hexagon" ).click(function() {
  $( this ).toggleClass('hexagon hexagon-hide');
});
/**
 * Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
 * http://stackoverflow.com/q/10062887/1397351
 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.row {
  margin: -18% 0;
  text-align: center;
}
.row:first-child {
  margin-top: -20%;
}
.hexagon, .hexagon-hide {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0 8.5%;
  padding: 16%;
  transform: rotate(30deg) skewY(30deg) scaleX(.866);
  /* .866 = sqrt(3)/2 */
}
.hexagon:before, .hexagon-hide:before,
.content:after {
  display: block;
  position: absolute;
  /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
  top: 6.7%;
  right: 0;
  bottom: 6.7%;
  left: 0;
  /* 6.7% = (100% -86.6%)/2 */
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
  /* 1.155 = 2/sqrt(3) */
  background-color: rgba(30, 144, 255, .56);
  background-size: cover;
  content: '';
}
t:after {
  content: attr(data-content);
}
.row:first-child .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/o0vmcz3hl/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:nth-child(2):before {
  background-image: url(http://s10.postimg.org/n7j0kcxgp/Untitled_2_0.jpg);
}
.row:nth-child(3) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/pen98a2qx/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:nth-child(2):before {
  background-image: url(http://s10.postimg.org/ivuevcqjt/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/dvwynekx5/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg);
}
.row:nth-child(5) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/i7lkceru1/Untitled_2_0.jpg);
}

.row:first-child .hexagon-hide:first-child:before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(2) .hexagon-hide:nth-child(2):before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(3) .hexagon-hide:first-child:before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(4) .hexagon-hide:nth-child(2):before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(2) .hexagon-hide:first-child:before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(4) .hexagon-hide:first-child:before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(5) .hexagon-hide:first-child:before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- content to be placed inside <body>…</body> -->
<div class='row'>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
  <div class='hexagon'></div>
</div>
<div class='row'>
  <div class='hexagon'></div>
</div>

相关文章：