图片放大效果
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//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> <mce:script type="text/javascript"><!-- //******* //鼠标移入显示大图片 //******* function yiru(t){ var ei = document.getElementById("big_image"); ei.style.display = "block"; ei.innerHTML = '<img src="' + t.src + '" mce_src="' + t.src + '" width="280px" height="280px" />'; 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"; } // --></mce:script> <body> <form id="form1" runat="server"> <div id="big_image" style="position: absolute; display: none; z-index: 2; border: 0px solid #f4f4f4;" mce_style="position: absolute; display: none; z-index: 2; border: 0px solid #f4f4f4;"> </div> <div> <table> <tr> <td style="width: 152px"> <img border="0" src="upload/2009_08_05_12150700015.jpg" mce_src="upload/2009_08_05_12150700015.jpg" οnmοusemοve="yiru(this);" οnmοuseοut="yichu(this);" style="width: 148px; height: 134px" /> </td> </tr> </table> </div> <br /> <br /> </form> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
