asp.net中如何实现把鼠标移到一张图片上面就能放大地弹出对应的图片
asp.net中如何实现把鼠标移到一张图片上面就能放大地弹出对应的图片
我是在DAtaList控件上的ItemTemplate增加了一个Image控件，用来显示来自于数据库的图片，我就想鼠标移到图片的上面就可以弹出一个放大的图片？
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head runat="server">
04. <title>无标题页</title>
05. <style type="text/css">
06. *{ margin:0; padding:0;}
07. img{ border:none;}
08.
09. .content{ width:1100px; margin:0 auto;}
10. .imglist{ width:1100px;}
11. .imglist img{ float:left; margin-right:5px;}
12. #HintImg{ position:absolute; padding:0; margin:0; display:none; z-index:999}
13. </style>
14.</head>
15.<body>
16. <div class="content">
17. <div style="height:50px;"></div>
18. <div class="imglist">
19. <img alt="" title="" src="http-://avatar.profile.csdn.-net/3/B/4/1_qiqishardgel.jpg"
20. shouimg="http:-//avatar.csdn.-net/3/B/4/1_qiqishardge.jpg" />
21. <img alt="" title="" src="http:-//avatar.profile.csdn.-net/3/B/4/1_qiqishardgel.jpg"
22. shouimg="http:-//avatar.csdn.-net/3/B/4/1_qiqishardge.jpg" />
23. <img alt="" title="" src="http:-//avatar.profile.csdn.-net/3/B/4/1_qiqishardgel.jpg"
24. shouimg="http:-//avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
25. <img alt="" title="" src="http:-//avatar.profile.csdn.-net/3/B/4/1_qiqishardgel.jpg"
26. shouimg="http:-//avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
27. <img alt="" title="" src="http:-//avatar.profile.csdn.-net/3/B/4/1_qiqishardgel.jpg"
28. shouimg="http:-//avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
29. </div>
30. </div>
31. <div id="HintImg"></div>
32. <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
33. <script type="text/javascript">
34. $(".imglist img").hover(function() {
35. $("*").stop(); //停止所有正在运行的动画
36. var offset = $(this).offset(); //取得事件对象的位置
37. var _left = (offset.left + $(this).width() + $("#HintImg").width() < 1100) ? (offset.left + $(this).width()) : (offset.left - $("#HintImg").width());
38. $("#HintImg").html('<img alt="" title="" src="' + $(this).attr("shouimg") + '" />').css({ "top": offset.top + "px", "left": _left + "px" }).fadeIn(500);
39. }, function() {
40. $("#HintImg").hide();
41. });
42. </script>
43.</body>