您的位置：首页 > Web前端 > JavaScript

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

2011-05-28 00:00 1036 查看

<script> 
function GetAbsPosition(obj) 
{ 
var curleft = 0, curtop = 0; 
do { 
curleft += obj.offsetLeft; 
curtop += obj.offsetTop; 
} while (obj = obj.offsetParent); 
return [curleft,curtop]; 
} 
function ShowFloatingImage(image, width, height) 
{ 
var id = "trailimageid"; 
var newdiv = document.getElementById(id); 
if(newdiv == null) 
{ 
newdiv = document.createElement('div'); 
newdiv.setAttribute('id',id); 
newdiv.setAttribute('onmouseout', "HideElement('"+id+"');"); 
document.body.appendChild(newdiv); 
} 
newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />'; 
var absPos = GetAbsPosition(image); 
newdiv.style.position = "absolute"; 
newdiv.style.posLeft = absPos[0] - width/2; 
newdiv.style.posTop = absPos[1] - height/2; 
newdiv.style.display="block"; 
} 
function HideElement(id) 
{ 
var elem = document.getElementById(id); 
elem.style.display="none"; 
} 
</script>

例子：

<body> 
<img src="1.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" /> 
</body>

经测试事件处理的不是很好。导致鼠标移开不能回到原位。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航