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

来源:https://www.sucaihuo.com/js/2776.html 2017-08-18 23:59浏览(745) 收藏

一款jQuery+CSS漂亮的颜色渐变选择器代码,可以选择多个渐变的效果,调整滑块的位置来选择不同的颜色,选择后的效果立即显示在下面的圆形和方形里面,颜色渐变的填充方式也可以通过下拉菜单进行选择。
jQuery+CSS漂亮的颜色渐变选择器代码
分类:其它特效 > 颜色选择器 难易:初级
查看演示 下载资源: 3 下载资源 下载积分: 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>
标签: 渐变颜色选择
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 沙发
    08-21 12:48
    l***g
    很好的源码,楼主加油,力赞!!
1 2