Heim >Web-Frontend >js-Tutorial >鼠标滑上去后图片放大浮出效果的js代码_图象特效

鼠标滑上去后图片放大浮出效果的js代码_图象特效

WBOY
WBOYOriginal
2016-05-16 18:06:201270Durchsuche
复制代码 代码如下:

<script> <BR>function 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(image, width, height) <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+ ' style="max-width:90%" height=' + (image.height + height) + ' / alt="鼠标滑上去后图片放大浮出效果的js代码_图象特效" >'; <BR>var absPos = GetAbsPosition(image); <BR>newdiv.style.position = "absolute"; <BR>newdiv.style.posLeft = absPos[0] - width/2; <BR>newdiv.style.posTop = absPos[1] - height/2; <BR>newdiv.style.display="block"; <BR>} <BR>function HideElement(id) <BR>{ <BR>var elem = document.getElementById(id); <BR>elem.style.display="none"; <BR>} <BR></script>

例子:
复制代码 代码如下:


鼠标滑上去后图片放大浮出效果的js代码_图象特效


经测试事件处理的不是很好。导致鼠标移开不能回到原位。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn