有意思的Js可拖动的渐变色角度选择器_浏览器特效

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

<html xmlns:v>
<head>
<meta http-equiv="mrc-type" mrc="text/html; charset=GB2312" />
<title>有意思的Js可拖动的角度选择器代码-http://www.mb5u.com</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>

所属频道：浏览器特效/更新时间：2013-04-16

[收藏][报错][返回列表]

有意思的Js可拖动的渐变色角度选择器_浏览器特效

浏览器特效Rss订阅特效代码搜索

浏览器特效推荐

猜你也喜欢看这些