有意思的Js可拖动的渐变色角度选择器

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html xmlns:v>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>有意思的Js可拖动的角度选择器代码</title>
<style>
body { margin:0px; padding:0px; }
v\:* { behavior:url(#default#vml); }
</style>
<script>
var x0=150, y0=150, r=150;
var md = false;
function rotate(angle){
    var ag;
    line1.from = x0+","+y0;
    try{
        line1.to = (r*Math.cos(angle)+x0)+","+(r*Math.sin(angle)+y0);
        ag = (angle+(angle<0?Math.PI*2:0))/Math.PI*180;
        fill1.angle = -ag;
        if(ag<270){
            arc1.startAngle = 90;
            arc1.endAngle = 90 + ag;
        }else{
            arc1.startAngle = -270;
            arc1.endAngle = ag-270;
        }
        line1.innerHTML = ag.toFixed(2);
    }catch(e){}
}
window.onload = function(){
    arc1.style.position="absolute";
    arc1.style.left = x0-r;
    arc1.style.top = x0-r;
    arc1.style.width = r*2;
    arc1.style.height = r*2;
    rotate(0);
}
document.onselectstart = function(){ return(false); }
document.onmousedown = function(){
    md = true;
    angle = Math.atan((event.clientY-y0)/(event.clientX-x0)) + ((event.clientX-x0)<0?Math.PI:0);
    rotate(angle);
}
document.onmouseup = function(){ md = false; }
document.onmousemove = function(){
    if(!md)return;
    angle = Math.atan((event.clientY-y0)/(event.clientX-x0)) + ((event.clientX-x0)<0?Math.PI:0);
    rotate(angle);
}
</script>
</head>
<body>
<v:line id="line1"></v:line>
<v:arc startAngle="90" endAngle="180" id="arc1" filled="false" />
<v:rect style="width:200px; height:120px;">
    <v:fill type="gradient" color="red" color2="blue" id="fill1"
        colors="30% yellow,70% green" method="Linear"
        FocusSize="0.001,0.001" Opacity="60%" Opacity2="100%"
        FocusPosition="50%,50%"
    />
</v:rect>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

有意思的Js可拖动的渐变色角度选择器

分类

网站常用

描述

Javascript模拟出的角度选择器，拖动这个简洁的滑块，会改变渐变色的角度，本代码有两个亮点：一个是滑块的拖动，别一个则是渐变色的实现，这两者的结合必然形成独特的代码。