有意思的Js可拖動的漸變色角度選擇器_瀏覽器特效

Javascript模擬出的角度選擇器，拖動這個簡潔的滑塊，會改變漸變色的角度，本代碼有兩個亮點：一個是滑塊的拖動，別一個則是漸變色的實現，這兩者的結合必然形成獨特的代碼。

<html xmlns:v>
<head>
<meta http-equiv="mrc-type" mrc="text/html; charset=GB2312" />
<title>有意思的Js可拖動的角度選擇器代碼-http://hl5o.cn</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

[收藏][報錯][返回列表]

相關瀏覽器特效：

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些

相關鏈接：
復制本頁鏈接| 搜索有意思的Js可拖動的漸變色角度選擇器
特效說明：
瀏覽器模板-有意思的Js可拖動的漸變色角度選擇器。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

有意思的Js可拖動的漸變色角度選擇器_瀏覽器特效

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些