github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(colorpicker): 优化游标显示效果 (#1863)

Browse Source
pull/1903/head
morning-star 7 months ago committed by GitHub
parent 7f610ba445
commit 25a333ffad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File

6
src/css/layui.css
Unescape View File

@ -1551,10 +1551,10 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-colorpicker-main{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; width: 280px; margin: 5px 0; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
.layui-colorpicker-main-wrapper{height: 180px; position: relative;}
.layui-colorpicker-basis{width: 260px; height: 100%; position: relative;}
.layui-colorpicker-basis{width: 260px; height: 100%; position: relative; overflow: hidden;}
.layui-colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));}
.layui-colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent);}
.layui-colorpicker-basis-cursor{width: 10px; height: 10px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px; cursor: pointer;}
.layui-colorpicker-basis-cursor{width: 10px; height: 10px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: 0%; right: 100%; cursor: pointer; transform: translate(-50%,-50%);}
.layui-colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);}
.layui-colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0;}
.layui-colorpicker-main-alpha{display: none; height: 12px; margin-top: 7px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
@ -1566,7 +1566,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-colorpicker-pre-isalpha{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
.layui-colorpicker-pre.layui-this{box-shadow: 0 0 3px 2px rgba(0,0,0,.15);}
.layui-colorpicker-pre > div{height: 100%; border-radius: 2px;}
.layui-colorpicker-main-input{text-align: right; padding-top: 7px; position: relative; z-index: 10;}
.layui-colorpicker-main-input{text-align: right; padding-top: 7px;}
.layui-colorpicker-main-input .layui-btn-container .layui-btn{margin: 0 0 0 10px;}
.layui-colorpicker-main-input div.layui-inline{float: left; font-size: 14px;}
.layui-colorpicker-main-input input.layui-input{width: 168px; height: 30px; color: #5F5F5F; padding-left: 5px;}

39
src/modules/colorpicker.js
Unescape View File

@ -488,14 +488,14 @@ layui.define(['jquery', 'lay'], function(exports){
var move = function(e){
var top = oldtop + (e.clientY - oldy)
,left = oldleft + (e.clientX - oldx)
,maxh = basis[0].offsetHeight - 3
,maxw = basis[0].offsetWidth - 3;
if(top < -3)top = -3;
,maxh = basis[0].offsetHeight
,maxw = basis[0].offsetWidth;
if(top < 0)top = 0;
if(top > maxh)top = maxh;
if(left < -3)left = -3;
if(left < 0)left = 0;
if(left > maxw)left = maxw;
var s = (left + 3)/260*100
,b = 100 - (top + 3)/180*100;
var s = left/260*100
,b = 100 - top/180*100;
_b = b;
_s = s;
change(_h, s, b, _a);
@ -507,14 +507,14 @@ layui.define(['jquery', 'lay'], function(exports){
});
basis.on('mousedown', function(e){
var top = e.clientY - $(this).offset().top - 3 + $win.scrollTop()
,left = e.clientX - $(this).offset().left - 3 + $win.scrollLeft()
if(top < -3)top = -3;
if(top > this.offsetHeight - 3)top = this.offsetHeight - 3;
if(left < -3)left = -3;
if(left > this.offsetWidth - 3)left = this.offsetWidth - 3;
var s = (left + 3)/260*100
,b = 100 - (top + 3)/180*100;
var top = e.clientY - $(this).offset().top + $win.scrollTop()
,left = e.clientX - $(this).offset().left + $win.scrollLeft()
if(top < 0)top = 0;
if(top > this.offsetHeight)top = this.offsetHeight;
if(left < 0)left = 0;
if(left > this.offsetWidth)left = this.offsetWidth;
var s = left/260*100
,b = 100 - top/180*100;
_b = b;
_s = s;
change(_h, s, b, _a);
@ -602,16 +602,17 @@ layui.define(['jquery', 'lay'], function(exports){
var hex = HSBToHEX({h:h, s:100, b:100});
var color = HSBToHEX({h:h, s:s, b:b});
var sidetop = h/360*180;
var top = 180 - b/100*180 - 3;
var left = s/100*260 - 3;
var top = 180 - b/100*180;
var left = s/100*260;
var basisElem = that.elemPicker.find('.' + PICKER_BASIS)[0];
that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop); //滑块的top
that.elemPicker.find('.' + PICKER_BASIS)[0].style.background = '#' + hex; //颜色选择器的背景
basisElem.style.background = '#' + hex; //颜色选择器的背景
//选择器的top left
that.elemPicker.find('.' + PICKER_BASIS_CUR).css({
"top": top
,"left": left
"top": top / basisElem.offsetHeight * 100 + '%',
"left": left / basisElem.offsetWidth * 100 + '%'
});
// if(type === 'change') return;

Write Preview
Loading…
Cancel
Save