本文介绍了一种通过JavaScript实现的鼠标移动时图片放大的前端特效。包括代码实现和具体步骤，适合前端开发者学习。
http://www.cnblogs.com/cloudgamer/
上面是一个前端特效博客
鼠标移动上去图片放大效果
<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>JavaScript Test</title>
</head>
<script type="text/javascript">
//*******
//鼠标移入显示大图片
//*******
function yiru(t){
var ei = document.getElementById("big_image");
ei.style.display = "block";
ei.innerHTML = '<img src="' + t.src + '" width="180px" height="180px" />';
ei.style.top =document.body.scrollTop+window.event.clientY+10+"px";
ei.style.left =window.event.clientX+10+"px";
}
//*******
//鼠标移出隐藏大图片
//*******
function yichu(){
var ei = document.getElementById("big_image");
ei.innerHTML = "";
ei.style.display = "none";
}
</script>
<body>
<form id="form1" runat="server">
<div id="big_image" style="position: absolute; display: none; z-index: 2; border: 0px solid #f
4f
4f
4;">
</div>
<div>
<table>
<tr>
<td>
<img border="0" src="images/tupian.gif" width="100" height="80" onmousemove="yiru(this);" onmouseout="yichu(this);" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
