|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 求教這個JS效果
http://www.80t.net/old/
上面的圖片,鼠標放上去的效果如何實現?
謝謝! |
| title?? |
| 是那個邊緣出現紅色閃光的效果.JS的 |
| 那個不需要用js 用事件+鼠標動作 就能處理 |
那請問如何讓頁面上所有圖片全部加上這個效果哪?
而且圖片是動態發佈的 |
lianfei
大哥,幫幫忙好嗎謝謝你了 |
[code]
<public:component urn="com.rainersu.xshyborder">
<public:property name="step" value=12 />
<public:method name="doFade" />
<public:attach event="ondocumentready" onevent="doInit()" />
</public:component>
<script>
var col3,col1,col2,col;
var sid=element.uniqueID;
var oTimer;
var x,y,z,i;
var bend;
function isHex(_s){
//return /^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(_s); - ie5.5+
return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(_s);
}
function isRgb(_s){
//return /^rgb\((?:\d,\d,\d|\d%,\d%,\d%)\)$/.test(_s); - ie5.5+
return /^rgb\((\d+,\d+,\d+|\d+%,\d+%,\d+%)\)$/i.test(_s);
}
function makeArray(_s){
var col;
if (isRgb(_s)){
var s=_s.slice(4,_s.length-1);
col=s.split(",");
for (var i=0;i<3;i++){
var n=col[i];
if (n.charAt(n.length-1)=="%"){
n=parseInt(n.replace("%",""),10);
n=Math.round(n*255/100);
}
else n=parseInt(n);
col[i]=n;
}
}
else if (isHex(_s)){
var s=_s.slice(1);
if (s.length==3) s=s.charAt(0)+s.charAt(0)+s.charAt(1)+s.charAt(1)+s.charAt(2)+s.charAt(2);
col=new Array(3);
var m=0;
for (var i=0;i<3;i++){
col[i]=parseInt(s.substring(m,m+2),16);
m=m+2;
}
}
return col;
}
function doInit(){
element.attachEvent("onmouseover",doOver);
element.attachEvent("onmouseout",doOut);
}
function resetArray(_col){
col=new Array();
for (var _i=0;_i<_col.length;_i++) col[_i]=_col[_i];
}
function setColor(){
element.style.borderColor="rgb("+col.toString()+")";
}
function beginFade(){
var c1=element.currentStyle["color-start"];
var c2=element.currentStyle["color-hover"];
var c3=element.currentStyle["color-end"];
if (c1==null) c1="#000000";
if (c2==null) c2=c1;
if (c3==null) c3=c1;
col3=makeArray(c1);
col1=makeArray(c2);
col2=makeArray(c3);
if (col1==null || col2==null) return;
resetArray(col1);
if (oTimer!=null) window.clearTimeout(oTimer);
i=0;
x=Math.floor((col2[0]-col1[0])/step);
y=Math.floor((col2[1]-col1[1])/step);
z=Math.floor((col2[2]-col1[2])/step);
doFade();
}
function doFade(){
if (i==step){
i=0;x=-x;y=-y;z=-z;
}
setColor();
col[0]+=x;col[0]=Math.max(0,Math.min(255,col[0]));
col[1]+=y;col[1]=Math.max(0,Math.min(255,col[1]));
col[2]+=z;col[2]=Math.max(0,Math.min(255,col[2]));
i++;
if (bend){resetArray(col3);setColor();window.clearTimeout(oTimer);}
else oTimer=window.setTimeout(sid+".doFade()",28);
}
function doOver(){bend=false;beginFade();}
function doOut(){bend=true;}
</script>
[/code] |
| 頭一次見，效果還不錯啊 |
| 這個要頂 |
謝謝wpliao大哥~
可是....小弟還是不會用....
不知道這段JS怎麼用到頁面裡 |
|
