<div class="codetitle"> <span><a style="CURSOR: pointer" data="14887" class="copybut" id="copybut14887" onclick="doCopy('code14887')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code14887"> <br> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <br><title>jQuery图片预览-jQuery在线演示-jQuery学习</title> <br><link href="http://www.jquery001.com/css/Stylesheet_min.css" rel="stylesheet" type="text/css"> <br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <br><style type="text/css"> <BR>img <BR>{ <BR>border: none; <BR>} <br><br><BR>ul, li <BR>{ <BR>margin: 0; <BR>padding: 0; <BR>} <br><br><BR>li <BR>{ <BR>list-style: none; <BR>float: left; <BR>display: inline; <BR>margin-right: 10px; <BR>} <br><br><BR>#imglist img <BR>{ <BR>width: 150px; <BR>height: 120px; <BR>} <br><br><BR>#imgshow <BR>{ <BR>position: absolute; <BR>border: 1px solid #ccc; <BR>background: #333; <BR>padding: 5px; <BR>color: #fff; <BR>display: none; <BR>} <BR></style> <br><script type="text/javascript"> <BR>var ShowImage = function () { <BR>xOffset = 10; <BR>yOffset = 30; <BR>$("#imglist").find("img").hover(function (e) { <BR>$("<img id='imgshow' src='" + this.src + "' / alt="jquery预览图片实现鼠标放上去显示实际大小_jquery" >").appendTo("body"); <BR>//下面是两种样式赋值方法 <BR>//$("#imgshow").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow"); <BR>$("#imgshow").css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px"}).fadeIn("slow"); <BR>}, function () { <BR>$("#imgshow").remove(); <BR>}); <BR>}; <br><br><BR>jQuery(document).ready(function () { <BR>ShowImage(); <BR>}); <BR></script> <br><br><br> <br> <br><div id="page-wrap"> <br><div id="content-wrap"> <br><div id="content-left" class="demo"> <br><ul id="imglist"> <br><li><a> <br><img src="http://g.hiphotos.baidu.com/image/w%3D2048/sign=0a53d9eca1cc7cd9fa2d33d90d39203f/35a85edf8db1cb13efa8fe12df54564e93584bea.jpg" alt="图片"></a></li> <br><li><a> <br><img src="http://a0.att.hudong.com/70/44/14300000029584127555444098375.jpg" alt="图片"></a></li> <br> </ul> <br> </div> <br> </div> <br><br><br> </div> <br> <br> <br> </div>
