jQuery+CSS漂亮的颜色渐变选择器代码

一款jQuery+CSS漂亮的颜色渐变选择器代码，可以选择多个渐变的效果，调整滑块的位置来选择不同的颜色，选择后的效果立即显示在下面的圆形和方形里面，颜色渐变的填充方式也可以通过下拉菜单进行选择。

分类：其它特效 > 颜色选择器难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件、jQuery和其余的JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/colorpicker.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/dom-drag.js"></script>
<script type="text/javascript" src="js/gradx.js"></script>

页面的body部分，用了多个div标签作为容器，并有部分嵌套结构，代码如下：

<div id="gradX" ></div>
<div class="result">显示效果</div>
<div class="targets">
	<div class="target" id="target">
		<div class="target_text">预览1</div>
	</div>
	<div class="target" id="target2">
		<div class="target_text">预览2</div>
	</div>
</div>

页面的底部，启用插件并设置好相应参数，代码如下：

<script type="text/javascript">
gradX("#gradX", {
	targets: [".target"]
});
</script>