jquery实现简单彩色画板效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现简单彩色画板效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } body { background: #F5F5F5; font-family: sans-serif; height: 100%; width: 100%; } h2 { text-align: center; margin: 20px; font-family: 'Open Sans', sans-serif; } .paint { padding-top: 2px; } /* CANVAS STYLING ===================*/ canvas { background: #FFF; display: block; margin: 40px auto 10px; border-radius: 5px; border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0; box-shadow: 0 4px 0 0 #E0E0E0; cursor: url(../img/cursor.png), crosshair; } /* CONTROLS (NEW COLOURS) =======================*/ .controls { min-height: 60px; margin: 0 auto; width: 600px; border-radius: 5px; overflow: hidden; } ul { list-style: none; margin: 0; float: left; padding: 10px 0 20px; width: 100%; text-align: center; } ul li, #newColor { display: block; height: 54px; width: 54px; border-radius: 60px; cursor: pointer; border: 0; box-shadow: 0 3px 0 0 #E0E0E0; } ul li { display: inline-block; margin: 0 5px 10px; } .red { background: #E74C3C; } .blue { background: #3498DB; } .yellow { background: #F1C40F; } .selected { border: 7px solid #68B25B; width: 40px; height: 40px; } /* BUTTON STYLES ==============*/ button { background: #68B25B; box-shadow: 0 3px 0 0 #6A845F; color: #fff; outline: none; cursor: pointer; text-shadow: 0 1px #6A845F; display: block; font-size: 16px; line-height: 40px; } #revealColorSelect { border: none; border-radius: 5px; margin: 10px auto; padding: 5px 20px; width: 160px; } #clear { border: none; border-radius: 5px; margin: 10px auto; padding: 0 20px; width: 160px; height: 40px; } /* New Color Palette ==================*/ #colorSelect { background: #fff; border-radius: 5px; clear: both; margin: 20px auto 0; padding: 10px; width: 305px; position: relative; display: none; border-top: 1px solid #E0E0E0; border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; } #colorSelect:after { bottom: 100%; left: 50%; border: solid; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px; } #newColor { width: 80px; height: 80px; border-radius: 3px; box-shadow: none; float: left; border: none; margin: 10px 20px 20px 10px; } .sliders p { margin: 8px 0; vertical-align: middle; } .sliders label { display: inline-block; margin: 0 10px 0 0; width: 35px; font-size: 14px; color: #6D574E; } .sliders input { position: relative; top: 2px; } #colorSelect button { border: none; border-top: 1px solid #6A845F; border-radius: 0 0 5px 5px; clear:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0