jQuery点击调色板变换背景代码
1、新建html文档。
2、书写hmtl代艨位雅剖码。<div class="wrapper"> <稆糨孝汶;div class="palette"> <div class="palette_item_wrapper"> <div data-color="#e169c3" class="palette_color"></div> <div data-color="#b569e1" class="palette_color"></div> <div data-color="#7169e1" class="palette_color"></div> <div data-color="#69b8e1" class="palette_color"></div> <div data-color="#69e1d4" class="palette_color"></div> <div data-color="#6ce169" class="palette_color"></div> <div data-color="#bee169" class="palette_color"></div> <div data-color="#e1a169" class="palette_color"></div> <div data-color="#83091d" class="palette_color"></div> <div data-color="#83091d" class="palette_color"></div> </div> <div class="palette_color__main"></div> </div></div>
3、书写css代码。.wrapper { width: 100vw; height: 100vh; -we芟鲠阻缒bkit-transition: background .3s; transition: background .3s; }.palette { width: 300px; height: 300px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }.palette .palette_item_wrapper { -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; width: 100%; height: 100%; border-radius: 50%; -webkit-transform: translateX(100px); transform: translateX(100px); -webkit-transition-delay: .4s; transition-delay: .4s; }.palette.palette__opened .palette_item_wrapper { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 0s; transition-delay: 0s; }.palette.palette__opened .palette_color { -webkit-transition-delay: .2s; transition-delay: .2s; }.palette.palette__opened .palette_color:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg); }.palette.palette__opened .palette_color:nth-child(2) { -webkit-transform: rotate(36deg); transform: rotate(36deg); }.palette.palette__opened .palette_color:nth-child(3) { -webkit-transform: rotate(72deg); transform: rotate(72deg); }.palette.palette__opened .palette_color:nth-child(4) { -webkit-transform: rotate(108deg); transform: rotate(108deg); }.palette.palette__opened .palette_color:nth-child(5) { -webkit-transform: rotate(144deg); transform: rotate(144deg); }.palette.palette__opened .palette_color:nth-child(6) { -webkit-transform: rotate(180deg); transform: rotate(180deg); }.palette.palette__opened .palette_color:nth-child(7) { -webkit-transform: rotate(216deg); transform: rotate(216deg); }.palette.palette__opened .palette_color:nth-child(8) { -webkit-transform: rotate(252deg); transform: rotate(252deg); }.palette.palette__opened .palette_color:nth-child(9) { -webkit-transform: rotate(288deg); transform: rotate(288deg); }.palette.palette__opened .palette_color:nth-child(10) { -webkit-transform: rotate(324deg); transform: rotate(324deg); }.palette .palette_color, .palette .palette_color__main { position: absolute; border-radius: 50%; cursor: pointer; border-style: solid; border-color: #ffffff; -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); }.palette .palette_color__main { background-color: #e16969; width: 100px; height: 100px; -webkit-transition: background .3s; transition: background .3s; border-width: 6px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }.palette .palette_color { width: 50px; height: 50px; display: block; -webkit-transform-origin: 250% 50%; transform-origin: 250% 50%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; border-width: 3px; -webkit-transition-delay: 0s; transition-delay: 0s; left: 12px; top: 0; bottom: 0; margin: auto; }
4、书写并添加js代码。<script src='js/jquery.min.js'></script><script>var _$paletteElement = $('.palette_color');function _colorizePaletteItems(){ $.each(_$paletteElement, function(i){ $(this).css('background-color', $(this).data('color')); })}function _togglePalette(){ $('.palette_color__main').on('click', function(){ $('.palette').toggleClass('palette__opened'); })}function _initSetColor(){ $('.palette_color').on('click', function(){ var color = $(this).data('color'); _setColor(color); })}function _setColor(color){ $('.palette_color__main').css('background', color); $('.wrapper').css('background', color);}_colorizePaletteItems();_togglePalette();_initSetColor();</script>
5、代码整体结构。
6、查看效果。
