그림 롤오버하면 반짝이는 효과??? 정보
그림 롤오버하면 반짝이는 효과???
관련링크
http://www.minihana.co.kr
126회 연결
본문
http://www.minihana.co.kr/ 처럼 이미지에 마우스 가져가면 반짝이는 효과주려는데요
이렇게하는것이 맞는지 알수잇을까요?
아니면 다른 방법이 있는지 알려주시면 감사하겟습니다.
이미지에 적용
style="border:0 solid #ffffff" onmouseover="opacity(1);" onmouseout="opacity(2);"
js에 적용
var FrontComm = {
setLoding:function ()
{
if (document.getElementById('dLoading')) {
document.getElementById('dLoading').show();
} else {
var sLoding = '<div style="top:0px;left:0px;width:1500px;height:2000px;position:absolute;opacity: .1;filter:alpha(opacity=10);background:#000000;"></div><div style="position:absolute;top:250px;left:200px;width:400px;height:150px; padding:50px; text-align:center; color:#575757; font-size:12px;background:#ffffff; font-family:dotum,돋움,돋움체;"><b>처리중입니다. 잠시만 기다려주세요</b><img src="http://img0001.echosting.cafe24.com/admin/center/newadmin/c/send.gif" border=""/></div>';
eNewDiv = document.createElement('div');
document.body.appendChild(eNewDiv);
eNewDiv.id = 'dLoading';
eNewDiv.innerHTML = sLoding;
}
},
unsetLoding:function ()
{
document.getElementById('dLoading').style.display = 'none';
}
}
이렇게하는것이 맞는지 알수잇을까요?
아니면 다른 방법이 있는지 알려주시면 감사하겟습니다.
이미지에 적용
style="border:0 solid #ffffff" onmouseover="opacity(1);" onmouseout="opacity(2);"
js에 적용
var FrontComm = {
setLoding:function ()
{
if (document.getElementById('dLoading')) {
document.getElementById('dLoading').show();
} else {
var sLoding = '<div style="top:0px;left:0px;width:1500px;height:2000px;position:absolute;opacity: .1;filter:alpha(opacity=10);background:#000000;"></div><div style="position:absolute;top:250px;left:200px;width:400px;height:150px; padding:50px; text-align:center; color:#575757; font-size:12px;background:#ffffff; font-family:dotum,돋움,돋움체;"><b>처리중입니다. 잠시만 기다려주세요</b><img src="http://img0001.echosting.cafe24.com/admin/center/newadmin/c/send.gif" border=""/></div>';
eNewDiv = document.createElement('div');
document.body.appendChild(eNewDiv);
eNewDiv.id = 'dLoading';
eNewDiv.innerHTML = sLoding;
}
},
unsetLoding:function ()
{
document.getElementById('dLoading').style.display = 'none';
}
}
댓글 전체
http://www.minihana.co.kr 에서 사용하는 코드는 아래와 같은데요
익스만 될듯합니다 ^^;
<script type="text/javascript" language="JavaScript">
//<![CDATA]
var globopObject;
var opIndex=0;
var cleared=true;
var direction=10;
function dynOpacity(opObject,stop) {
if (stop) {
clearInterval(window.tm);
cleared=true;
opIndex=10;
return;
}
globopObject=opObject;
if (opIndex>105) direction=-4;
if (opIndex<100) direction=4;
opIndex+=direction;
globopObject.style.filter='alpha(opacity:' + opIndex + ')';
if (cleared) {
window.tm=setInterval("dynOpacity(globopObject,false);",1);
cleared=false;
}
}
function opacity(num) {
if(num == 1) {
dynOpacity(event.srcElement,false);
}
if(num == 2) {
event.srcElement.style.filter="";
dynOpacity(event.srcElement,true);
}
}
//]]>
</script>
<img style="cursor:pointer;" src="http://minih09.cafe24.com/web/product/tiny/minih09_4853.jpg" onmouseover="opacity(1);" onmouseout="opacity(2);"border="0" />
익스만 될듯합니다 ^^;
<script type="text/javascript" language="JavaScript">
//<![CDATA]
var globopObject;
var opIndex=0;
var cleared=true;
var direction=10;
function dynOpacity(opObject,stop) {
if (stop) {
clearInterval(window.tm);
cleared=true;
opIndex=10;
return;
}
globopObject=opObject;
if (opIndex>105) direction=-4;
if (opIndex<100) direction=4;
opIndex+=direction;
globopObject.style.filter='alpha(opacity:' + opIndex + ')';
if (cleared) {
window.tm=setInterval("dynOpacity(globopObject,false);",1);
cleared=false;
}
}
function opacity(num) {
if(num == 1) {
dynOpacity(event.srcElement,false);
}
if(num == 2) {
event.srcElement.style.filter="";
dynOpacity(event.srcElement,true);
}
}
//]]>
</script>
<img style="cursor:pointer;" src="http://minih09.cafe24.com/web/product/tiny/minih09_4853.jpg" onmouseover="opacity(1);" onmouseout="opacity(2);"border="0" />
jQuery 라이브러리에서 fadeout 하시면 될것같네요
