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

2024-09-05 12:17:54

字体：大中小

来源：转载

供稿：网友

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

<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>

上一篇：一个简洁、漂亮的Ajax表单验证程序 vForm

下一篇：JavaScript单击按钮调用函数

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注