Question

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

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

＆＃13;

//I don't know how my java script is going to be

＆＃13;

/**
 * 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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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");
}

＆＃13;

<div id="body" class="imageOne"></div>

＆＃13;

Answer 1

结果：jsfiddle

我添加了一个新类.hexagon-hide（与.hexagon相同但背景图像不同），然后我添加了JQuery函数，在hexagon div中点击.hexagon和.hexagon-hide之间切换。

＆＃13;

$( ".hexagon" ).click(function() {
  $( this ).toggleClass('hexagon hexagon-hide');
});

＆＃13;

/**
 * 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");}

＆＃13;

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

＆＃13;

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

1 个答案: