<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <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>테두리: 없음; <br>} <br><br><br>ul, li <br>{ <br>여백: 0; <br>패딩: 0; <br>} <br><br><br>li <br>{ <br>목록 스타일: 없음; <br>플로트: 왼쪽; <br>디스플레이: 인라인; <br>여백 오른쪽: 10px; <br>} <br><br><br>#imglist img <br>{ <br>너비: 150px; <br>높이: 120px; <br>} <br><br><br>#imgshow <br>{ <br>위치: 절대; <br>테두리: 1px 실선 #ccc; <br>배경: #333; <br>패딩: 5px; <br>색상: #fff; <br>디스플레이: 없음; <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 "' /> ;").appendTo("body"); <br>//下side是两种样式赋值방법 <br>//$("#imgshow").css("top", (e.pageY - xOffset) " px").css("왼쪽", (e.pageX yOffset) "px").fadeIn("느린"); <br>$("#imgshow").css({"top":(e.pageY - xOffset) "px","left":(e.pageX yOffset) "px"}).fadeIn("slow") <br>}, function () { <br>$("#imgshow"). 제거() <br>}); <br>}; <br><br><br>jQuery(document).ready(function () { <br>ShowImage(); <br>}); <br></script> <br><br><br></head> <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=2048/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></body> <br></html> <br> </div>
< /li> 