才学jquery两天。代码可能比较杂，仅供参考。
<!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>无标题文档</title> <script type="text/javascript" src="file:///E|/MyWeb/MyBlog/Js/jquery-1.7.2.js"></script> <style type="text/css"> .imgDiv{ position:absolute;} #showPic{ position:absolute; z-index:2; top:200px; left:200px; width:150px; height:300px; display:none;} </style> </head> <body> <div id="pic"> <img src="file:///F|/Picture/唯美宽屏桌面/jiping (1).jpg" width="300px" height="200px" title="demo"/><br/> <img src="file:///F|/Picture/唯美宽屏桌面/jiping (3).jpg" width="300px" height="200px" title="demo"/> </div> <div id="showPic"><img class='imgDiv'></div> <script type="text/javascript"> $("#pic img").mouseover(function(e){ //var $img=$(""); //创建一个img标签 //$("#showPic").append($img); //将img插入到div var src=$(this).attr("src"); //获取当前src var scrTop=e.originalEvent.y || e.originalEvent.layerY || 0; //获取当前鼠标的Y坐标 var scrLeft= e.originalEvent.x || e.originalEvent.layerX || 0; //获取当前鼠标的X坐标 $("#showPic").css("top",scrTop).css("left",scrLeft).show(500); //设置div宽度高度并显示 $("#showPic img").attr("src",src).attr("width",'400px').attr('height','400px').addClass("imgDiv");//设置图片的路径.高度。宽度 }); /* 鼠标移开事件*/ $("#pic").mouseout(function(){ $("#showPic").hide(); }); </script> </body> </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>无标题文档</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <style type="text/css"> #tip{position:absolute; z-index:2; border:1px solid black; width:400px; background:black; color:white;} li{ float:left; list-style:none; padding:0 10px;} li img{ width:200px; height:150px;} </style> </head> <body> <ul> <li><img src="images/jiping (1).jpg" alt="第一张图片" /></li> <li><img src="images/jiping (2).jpg" alt="第二张图片" /></li> <li><img src="images/jiping (3).jpg" alt="第三张图片" /></li> </ul> <script type="text/javascript"> $("li img").mouseover(function(e){ var div="<div id='tip'></div>" //创建div $("body").append(div); //添加div var img="<img src='"+this.src+"' />"; //创建图片 var mytitle=this.alt; //设置标题 $("div#tip").append(img).append(mytitle); //插入图片和标题到div后面 $("div#tip").css({ //设置div的属性 "top":+e.pageY+"px" //设置top ,"left":+e.pageX+"px" //设定left }).find("img").css({ //设置div里面img属性 "width":"400px" //设置宽度 ,"height":+"300px" //设置高度 }).end().show(); //返回到div然后显示 }).mouseout(function(){ $("div#tip").remove(); //删除div }).mousemove(function(e){ //鼠标移动事件 $("div#tip").css({ "top":+e.pageY+"px" ,"left":+e.pageX+"px" }); }); </script> </body> </html>
效果图
代码生疏，仅供参考，欢迎评论留言
1348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
