網(wǎng)頁(yè)特效代碼模板無憂>網(wǎng)頁(yè)特效>瀏覽器特效代碼>

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

Javascript模擬出的角度選擇器，拖動(dòng)這個(gè)簡(jiǎn)潔的滑塊，會(huì)改變漸變色的角度，本代碼有兩個(gè)亮點(diǎn)：一個(gè)是滑塊的拖動(dòng)，別一個(gè)則是漸變色的實(shí)現(xiàn)，這兩者的結(jié)合必然形成獨(dú)特的代碼。

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

所屬頻道：瀏覽器特效/更新時(shí)間：2013-04-16

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)瀏覽器特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

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

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

瀏覽器特效推薦

猜你也喜歡看這些