>웹 프론트엔드 >JS 튜토리얼 >마우스 슬라이드 후 이미지가 확대되어 팝업되는 효과에 대한 js 코드_이미지 특수 효과

마우스 슬라이드 후 이미지가 확대되어 팝업되는 효과에 대한 js 코드_이미지 특수 효과

WBOY
WBOY원래의
2016-05-16 18:06:201266검색
复代码 代码如下:

<script> <br>함수 GetAbsPosition(obj) <br>{ <br>var curleft = 0, curtop = 0; <br>do { <br>curleft = obj.offsetLeft; <br>curtop = obj.offsetTop; <br>} while(obj = obj.offsetParent); <br>return [curleft,curtop]; <br>} <br>function ShowFloatingImage(이미지, 너비, 높이) <br>{ <br>var id = "trailimageid"; <br>var newdiv = document.getElementById(id); <br>if(newdiv == null) <br>{ <br>newdiv = document.createElement('div'); <br>newdiv.setAttribute('id',id); <br>newdiv.setAttribute('onmouseout', "HideElement('" id "');"); <br>document.body.appendChild(newdiv); <br>} <br>newdiv.innerHTML = '<img src=' image.src ' width=' (image.width 너비) ' height=' (image.height 높이) ' />'; <br>var absPos = GetAbsPosition(이미지); <br>newdiv.style.position = "절대"; <br>newdiv.style.posLeft = absPos[0] - 너비/2; <br>newdiv.style.posTop = absPos[1] - 높이/2; <br>newdiv.style.display="차단"; <br>} <br>function HideElement(id) <br>{ <br>var elem = document.getElementById(id); <br>elem.style.display="없음"; <br>} <br></script>

例子:
复代码 代码如下:

< ;몸>



经测试事件处理的不是很好。导致鼠标移开不能回到原位。
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.