Jquery实现鼠标放在图片上面显示大图效果

来源：互联网发布：java输入多行字符串编辑：程序博客网时间：2024/04/27 18:24

才学jquery两天。代码可能比较杂，仅供参考。

引用 http://www.zhjie.net

<!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插入到divvar src=$(this).attr("src");//获取当前srcvar 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);//添加divvar 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>

效果图

代码生疏，仅供参考，欢迎评论留言