Jquery实现鼠标放在图片上面显示大图效果
程序员文章站
2022-05-29 10:55:24
...
才学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>
效果图
代码生疏，仅供参考，欢迎评论留言
上一篇： 深拷贝和浅拷贝