|
我的组件发布：渐变色 |
|
近来发现很多人喜欢搞渐变色，，我在这里搞了个，希望大家喜欢。
要在INTERNET EXPLORER5。0以上才能使用 请到lostinet.oso.com.cn/public/观看效果 使用非常简单 只要定义 <style> a { behavior : url(htc.php?shade); } </style> 就可以了。。 ---------------------- 更高级的使用： 一：定义默认的颜色 <script> defaultShadeColor="silver"; </script> 二： 定义CSS的CLASS的使用方法： <style> .shade {behavior:url(htc.php?shade)} </style> 三： 在元素上定义 <span style="behavior:url(htc.php?shade)"> 四： 定义背静变色 <span shadeBack=true> 五： 定义个别元素的变色： <span shadeColor="yellow"> 暂时就这么多了：） -----------------------------------HTC.PHP--------------------------------------------- <? $f=$QUERY_STRING.".htc"; if(is_file($f)) { $arr=file($f); header("Expires : ".gmdate("D , d M Y ")." 24 : 59 : 59 GMT"); header("Content-Type:text/x-component"); for($i=0;$i<count($arr);$i++) { echo($arr[$i]); } } ?> -----------------------------------------SHADE.HTC------------------------------------- <public:component> <public:method name="_Timer" /> <public:property name="shadeColor" /> <public:property name="shadeBack" /> <public:attach event="oncontentready" onevent="oncontentready()" /> <script> /****************************************************************\ Promgram : Lostinet<[email protected]> Copyright : Reserved Version : 1.0Release [2001.5-15 <=> 2001.5-15] Generator : Microsoft Visual Studio 6.0 - Microsoft Development Environment \****************************************************************/ function GetColorHexCode(color) { var e=document.createElement("TABLE"); e.bgColor=color; var res=e.bgColor; e.removeNode(true); if(res.length!=7)return "#FFFFFE"; return res; } function d2h_(d) { if(d<10)return d+""; return String.fromCharCode(d+55); } function d2h(d) { var hi=Math.floor(d/16); var lo=Math.floor(d%16); return d2h_(hi)+d2h_(lo); } function h2d_(h) { var d=h.charCodeAt(0); if(d>96)d-=87; else if(d>64)d-=55; else d-=48; return d; } function h2d(h) { return h2d_(h.substr(0,1))*16+h2d_(h.substr(1,1)); } function Color(color) { color=GetColorHexCode(color); this.r=h2d(color.substr(1,2)); this.g=h2d(color.substr(3,2)); this.b=h2d(color.substr(5,2)); this.ToStr=ColorToStr; function ColorToStr() { return "#"+d2h(this.r)+d2h(this.g)+d2h(this.b); } } back=false; if(shadeBack)back=true; colorCurrent=null; colorTaskTo=null; colorTaskFrom=null; colorTo=null; colorFrom=null; colorNormal=null; if(shadeColor)colorHover=new Color(shadeColor); else if(window.defaultShadeColor)colorHover=new Color(window.defaultShadeColor); else colorHover=new Color("cyan"); span=null; IntervalId=null; timer=20; split=10; function DoChange(from,to) { colorTaskFrom=from; colorTaskTo=to; if(!IntervalId) { colorFrom=colorTaskFrom; colorTo=colorTaskTo; IntervalId=setInterval('document.getElementById("'+element.uniqueID+'")._Timer("'+element.uniqueID+'")',timer); } } function _Timer(uid) { colorCurrent.r=ChangeFromTo(colorCurrent.r,colorFrom.r,colorTo.r); colorCurrent.g=ChangeFromTo(colorCurrent.g,colorFrom.g,colorTo.g); colorCurrent.b=ChangeFromTo(colorCurrent.b,colorFrom.b,colorTo.b); if( colorCurrent.r==colorTo.r&& colorCurrent.g==colorTo.g&& colorCurrent.b==colorTo.b ) { if(colorTo==colorTaskTo) { clearInterval(IntervalId); IntervalId=null; } if(colorTo!=colorTaskTo) { colorFrom=colorTaskFrom; colorTo=colorTaskTo; } } var color=colorCurrent.ToStr(); if(back) { if(color.toLowerCase()=="#fffffe")span.style.backgroundColor=""; else span.style.backgroundColor=color; } else span.style.color=color; } function ChangeFromTo(s,f,t) { var l=Math.floor((t-f)/split)+(t>f?1:-1); s+=l; if(t>=f) { if(s>t)s=t; if(s<f)s=t; } if(t<=f) { if(s<t)s=t; if(t>s)s=t; } return s; } function omover() { if(!colorTo) { if(!currentStyle.color&&tagName.toLowerCase()=="hr")colorNormal=new Color(color); else colorNormal=new Color(back?currentStyle.backgroundColor:currentStyle.color); colorCurrent=new Color(colorNormal.ToStr()); } colorTo=colorHover; colorFrom=colorNormal; DoChange(colorNormal,colorHover); } function omout() { if(!colorTo)return false; DoChange(colorHover,colorNormal) } function oncontentready() { if(tagName.toLowerCase()=="span") { span=element; } else if(canHaveChildren) { span=document.createElement("Span"); var i=0; while(element.childNodes.length>i) { if(element.childNodes.item(i).nodeType==3) { span.insertAdjacentText("BeforeEnd",element.childNodes.item(i).nodeValue); i++; } else { span.insertAdjacentElement("BeforeEnd",element.childNodes.item(i)); } } innerHTML=""; insertAdjacentElement("BeforeEnd",span); } else { span=element; } this.attachEvent("onmouseover",omover); this.attachEvent("onmouseout",omout); } </script> </public:component> --------------------------------------SHADE.HTML----------------------------- <TITLE>public_dhtml</TITLE> <script> defaultShadeColor="goldenrod"; </script> <style> body,td { font-size : 26; } body { background-color : ghostwhite; color : midnightblue; } a { color : mediumblue; text-decoration : none; } a:hover { color : lime; text-decoration : underline; } a:active { text-decoration : underline; border-width : 2; } .shade { behavior : url(htc.php?shade); } </style> <BODY> [Powered By [email protected]]<p> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#80F800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#88F000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#90E800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#98E000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#A0D800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#A8D000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#B0C800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#B8C000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#C0B800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#C8B000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#D0A800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#D8A000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#E09800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#E89000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#F08800" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <a class=shade shadeBack=true>Welcome To </a><a class=shade shadeColor="#F88000" href="http://lostinet.oso.com.cn">lostinet.oso.com.cn</a> <i class=shade shadeBack=1 shadeColor=cyan><a class=shade shadeColor=yellow>！！！！！！！！</a></i><br> <input type=text class=shade value="move on me!"> <textarea class=shade> <html><title>dkjf</title></html> </textarea> <br class=shade> <hr class=shade color=lime size=4> <input type=button class=shade shadeBack=1 value="button???" style="border-style:outset;border-width:1"> </BODY> |