단순히 불투명도 mootools를 사용하여 불투명도가 흐림

단순한 HTML & 이미지를 포함하는 페이지에 두 개의 div가 있습니다. div에는 각각 고유 한 ID가 있습니다.단순히 불투명도 mootools를 사용하여 불투명도가 흐림

페이지를로드 할 때 div의 내용이 60 %이지만 마우스 오버시에는 100 %로 페이드 인합니다. 마우스 아웃시 60 %로 되돌아갑니다.

이 사이트는 그래서 이미 Mootools의 1.11 라이브러리를로드 의 Joomla 1.5.x 이하에 내장되어 있습니다. 나는 그물에 예제 코드를 찾고 있었고 jQuery로 이미지의 불투명도를 희미 해지기위한 참조가 많이 있지만 mootools에는 그다지 많은 부분이 발견되지 않았습니다.

모든 포인터

을 감상 할 수있다 :)

출처

2009-02-09 Anonymous

당신은 사업부로 이미지를 포장하고 페이드이 같은 것을 사용할 수 있습니다?

Fx.Style("div1", "opacity").start(1.0);

출처

2009-02-09 12:15:26 Frost

내 테스트 페이지에 추가했습니다. 마우스 오버시 변경하려면 어떻게해야합니까? 내가 mootools에 대한 경험이 없다고 말해야했는데 –

mooTools와 experince가 없지만 javascript를 사용하여 수행 할 수 있습니다. inhere : http://forum.mootools.net/viewtopic.php?id= 5125, 마우스 오버 효과를 얻으려면 onmouseover와 onmouseout을 호출하십시오. – Frost

해결책을 찾았습니다. mootools 1.2.1에서 작동합니다. div가 사라지고 img가 아닌 코드를 수정했습니다.

나는 내 머리에 넣고 : 다음

<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script> 
<script type="text/javascript"> 

    var fade_in = 1; 
    var fade_out = 0.5; 

</script> 
</head> 
<body onload="$$('div.box_panel').fade(0.5);">

이 내 div의에.

<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);"> 
     <h2>Box One</h2> 
     <p>This is a content box and some sample content to pad it out.</p> 
</div>

문제는 지금이 대신에 대한 CSS3 전환을 사용하여 1.11

출처

2009-02-09 15:54:46

업그레이드하거나 둘 다 사용하지 않는 이유는 무엇입니까? .. 1.11에 존재하지 않는 페이드 기능이 있습니까? – Frost

다른 Joomla 구성 요소가 '고장'일 수 있으므로 업그레이드 할 수 없습니다. 나는 V1.6이 mootools 1.2로 옮겨 가고 있다고 읽었지 만, 지금은 호환성 모드가 iffy로되어 있다고 읽었다. 시도해 볼 것입니다. –

이 같은 효과를 얻을하는 방법을 잘 모르겠어요입니다. 훨씬 더 간단합니다. (http://www.w3schools.com/css/css3_transitions.asp)

div.box_panel { 
    opacity: 0.6; 
    filter: alpha(opacity=60); 
    -webkit-transition: opacity .5s linear; 
    -moz-transition: opacity .5s linear; 
    -ms-transition: opacity .5s linear; 
    -o-transition: opacity .5s linear; 
    transition: opacity .5s linear; 
} 

div.box_panel:hover { 
    opacity: 1; 
    filter: alpha(opacity=100); 
}

출처

2017-01-13 11:34:19 Erin

단순히 불투명도 mootools를 사용하여 불투명도가 흐림

답변

관련 문제