[英]Hexagon with changing pictures on click in CSS HTML JavaScript
我是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函數，通過單擊六角形div在.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>
JavaScript slider 動態改變+ HTML/CSS，不改變圖片
[英]JavaScript slider dynamically changed + HTML/CSS , not changing pictures
如何首先加載html和css，然后再加載圖片，javascript等？
[英]how to load html and css first and the pictures, javascript etc later?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.