<!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> ???<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ???<title>jQuery图片预览</title> ???<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> ???<script type="text/javascript"> ???????var ShowImage = function() { ???????????xOffset = 10; ???????????yOffset = 30; ???????????jQuery("#imglist").find("img").hover(function(e) { ???????????????jQuery("<img id=‘imgshow‘ src=‘" + this.src + "‘ />").appendTo("body"); ???????????????jQuery("#imgshow") ???????????????????.css("top", (e.pageY - xOffset) + "px") ????????????????.css("left", (e.pageX + yOffset) + "px") ??????????.fadeIn("fast"); ???????????}, function() { ???????????????jQuery("#imgshow").remove(); ???????????}); ???????????jQuery("#imglist").find("img").mousemove(function(e) { ???????????????jQuery("#imgshow") ??????????????????.css("top", (e.pageY - xOffset) + "px") ????????????.css("left", (e.pageX + yOffset) + "px") ???????????}); ???????}; ???????jQuery(document).ready(function() { ???????????ShowImage(); ???????}); ???</script> ???<style type="text/css"> ???????body{ width:600px; margin:0 auto;} ???????img{border:none;} ???????ul,li{ ????????margin:0; ????????padding:0; ???????} ???????li{ ????????list-style:none; ????????float:left; ????????display:inline; ????????margin-right:10px; ???????} ???????#imglist img{width:150px;height:120px;} ???????#imgshow{ ????????position:absolute; ????????border:1px solid #ccc; ????????background:#333; ????????padding:5px; ????????color:#fff; ????????display:none; ????} ???</style></head><body><h4>asdfasd</h4><ul id="imglist"> ???<li><a><img src="img/home_list1.png" ?/></a></li> ???<li><a><img src="img/home_list2.png" ?/></a></li></ul></body></html>jQuery PC端图片预览，鼠标移上去查看大图
原文地址：http://www.cnblogs.com/arealy/p/7737846.html