记些小技巧,方便大家方便自己。 直接来代码: Code 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 2 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5<html xmlns="http://www.w3.org/1999/xhtml" > 6<head runat="server"> 7 <title>无标题页</title> 8 9<script language="javascript" type="text/javascript"> 10//显示大图11function showPic(sUrl){ 12 var x,y; 13 x = event.clientX; 14 y = event.clientY; 15 document.getElementById("picLayer").style.left = x; 16 document.getElementById("picLayer").style.top = y; 17 document.getElementById("picLayer").innerHTML = "<img src=\"" + sUrl + "\">"; 18 document.getElementById("picLayer").style.display = "block"; 19} 2021//隐藏大图22function hiddenPic(){ 23 document.getElementById("picLayer").innerHTML = ""; 24 document.getElementById("picLayer").style.display = "none"; 25} 26</script> 272829</head>30<body>3132 <form id="form1" runat="server">33 <div>34 <%--显示大图片的层,样式比较简单大家可以自己定义--%>35 <div id="picLayer" style="display:none;position:absolute;z-index:1;"></div>36 37 <%--显示图片--%>38 <img src="mypic.jpg" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" width="200" height="100" alt="哈哈"/> 39 40 41 </div>42 </form>43</body>44</html>45 很简单,有注释。有更好的方法请指教。 相关文章: 鼠标经过显示大图 2021-10-07 鼠标滑过显示提示框 2021-10-19 鼠标悬停小图标显示大图标 2022-12-23 jQuery鼠标经过显示大图 2021-11-05 鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法 2022-12-23 鼠标滑过切换div显示(鼠标事件) 2021-11-01 js鼠标滑动图片显示隐藏效果 2022-12-23 --鼠标经过图片显示大图 2021-09-03