网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款简单的jQuery颜色选择器插件,用户可以从预定义的调色板中选择颜色,该插件使用HTML5本地存储来存储和检索用户最近选择的颜色。
1. 首先,在页面头部加载颜色选择器样式文件,然后在页面尾部加载颜色选择js插件文件。
<link rel="stylesheet" href="colorPick.css">
<!-- OPTIONAL DARK THEME -->
<link rel="stylesheet" href="colorPick.dark.theme.css">
<script src="jquery.min.js"></script>
<script src="colorPick.js"></script>
2. 创建一个DOM元素来放置颜色选择器。
<div class="colorPickSelector"></div>
3. 初始化颜色选择器。
$(".colorPickSelector").colorPick();
4. 在CSS中设置颜色选择器的样式。
.colorPickSelector {
border-radius: 5px;
width: 36px;
height: 36px;
cursor: pointer;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-ms-transition: all linear .2s;
-o-transition: all linear .2s;
transition: all linear .2s;
}
.colorPickSelector:hover { transform: scale(1.1); }
5. 使用以下选项配置颜色选择器。
$(".colorPickSelector").colorPick({
'initialColor': '#3498db',
'allowRecent': true,
'recentMax': 5,
'allowCustomColor': false,
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
'onColorSelected': function() {
this.element.css({'backgroundColor': this.color, 'color': this.color});
}
});
转载请注明来源:jQuery HTML5选择颜色插件
本文永久链接地址:https://www.moyouyouw.cn/code/907.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论