提示浮层跟随鼠标移动
index.html
<!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>Image Preview with jQuery</title><meta name="description" content="Easiest jQuery Tooltip Ever"><script src="./Image Preview with jQuery_files/jquery.js" type="text/javascript"></script><script src="./Image Preview with jQuery_files/main.js" type="text/javascript"></script><style>body { margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%;}h1{font-size:180%;font-weight:normal;color:#555;}h2{clear:both;font-size:160%;font-weight:normal;color:#555;margin:0;padding:.5em 0;}a{text-decoration:none;color:#f30;}p{clear:both;margin:0;padding:.5em 0;}pre{display:block;font:100% "Courier New", Courier, monospace;padding:10px;border:1px solid #bae2f0;background:#e3f4f9;margin:.5em 0;overflow:auto;width:800px;}img{border:none;}ul,li{margin:0;padding:0;}li{list-style:none;float:left;display:inline;margin-right:10px;}/* */#preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;}/* */</style></head><body><h1>Easy Image Preview with jQuery</h1><h2>Image gallery (without caption)</h2><ul><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" title=""><img src="./Image Preview with jQuery_files/1s.jpg" alt="揭示浮层跟随鼠标移动"></a></li><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" title=""><img src="./Image Preview with jQuery_files/2s.jpg" alt="揭示浮层跟随鼠标移动"></a></li><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" title=""><img src="./Image Preview with jQuery_files/3s.jpg" alt="揭示浮层跟随鼠标移动"></a></li><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" title=""><img src="./Image Preview with jQuery_files/4s.jpg" alt="揭示浮层跟随鼠标移动"></a></li></ul><h2>Image gallery (with caption)</h2><ul><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" title="Lake and a mountain"><img src="./Image Preview with jQuery_files/1s.jpg" alt="揭示浮层跟随鼠标移动"></a></li><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" title="Fly fishing"><img src="./Image Preview with jQuery_files/2s.jpg" alt="揭示浮层跟随鼠标移动"></a></li><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" title="Autumn"><img src="./Image Preview with jQuery_files/3s.jpg" alt="揭示浮层跟随鼠标移动"></a></li><li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" title="Skiing on a mountain"><img src="./Image Preview with jQuery_files/4s.jpg" alt="揭示浮层跟随鼠标移动"></a></li></ul></body></html>this.imagePreview = function(){/* CONFIG */xOffset = 10;yOffset = 30;/* END CONFIG */$("a.preview").hover(function(e){this.t = this.title;this.title = "";var c = (this.t != "") ? "<br/>" + this.t : "";$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>"); $("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn("fast"); },function(){this.title = this.t;$("#preview").remove(); });$("a.preview").mousemove(function(e){$("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");});};// starting the script on page load$(document).ready(function(){imagePreview();});