html如何实现鼠标悬停缩略图，显示大图片（浏览器窗口上下左右居中显示） 200
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试网页</title>
<style type="text/css">
#list tr td span.hid{display:none;}
#list tr td a{}
#list tr td a:hover{position:relative;}
#list tr td a:hover span.hid{display:block;position:absolute;}
</style>
</head>
<body>
<table id="list" border="1" align="left" cellspacing="0">
<tr>
<td>
测试<br/>
<a><img src="小图片" border="1"/>
<span class="hid"><img border="1" style="left:expression((document.body.clientWidth-29)/2);top:expression((document.body.clientHeight-30)/2)" src="大图片.jpg"/></span></a>
</td>
</tr>
</table>
</body>
</html>
这样大图片显示的是在小图片下面，而不是浏览器页面中间，请问这个代码应该怎么改，才能实现鼠标悬停小图片时，大图片在浏览器窗口中居中显示？ 展开
2016-03-05 · 百度知道合伙人官方认证企业
育知同创教育
可以用js来实现
应该获取屏幕的分辨率：window.screen.width，
还有把图片固定在屏幕上：position:fixed;
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试网页</title>
<style type="text/css">
#list tr td span.hid{display:none;}
#list tr td a{}
#list tr td a:hover span.hid{display:block;position:fixed;}
</style>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript">
$(function(){
$('#show').hover(function(){
var img = new Image();
img.src = '1.png';
$('#hidImg').css('position','fixed');
$('#hidImg').css('left',(window.screen.width-img.width)/2 +'px');
$('#hidImg').css('top',(window.screen.height-img.height)/2 + 'px');
});
});
</script>
</head>
<body>
<table id="list" border="1" align="left" cellspacing="0">
<tr>
<td>
测试<br/>
<a>
<img src="1.png" border="1" id="show"/>
<span class="hid">
<img border="1" id="hidImg" src="1.png"/>
</span>
</a>
</td>
</tr>
</table>
</body>
</html>
