asp.net网页中图片点击放大效果

我从数据库中读取图片，放入DataList中显示出来小图片，点击小图片后把大的图片显示出来，放在浏览器的正中间，点击大图片后大图片消失，显示小图片，注意：该页面图片有多组... 我从数据库中读取图片，放入DataList中显示出来小图片，点击小图片后把大的图片显示出来，放在浏览器的正中间，点击大图片后大图片消失，显示小图片，注意：该页面图片有多组，不管滚动条浏览到哪里，点击小图片后显示的大图片都要显示在浏览位置的中间，希望高手指点，给出代码告诉我怎么写
QQ181913645写的是这个意思，但是点击小图片后，大图片只显示在屏幕的最左上方啊，并不是随着滚动条的位置放在浏览位置的中间啊展开

 我来答

3个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

QQ181913645
2010-10-15 · 超过40用户采纳过TA的回答

知道答主

回答量：176

采纳率：0%

帮助的人：117万

我也去答题访问个人页

关注

展开全部

帮你写了一个静态的展示效果，你看是下是否这种效果，直接复制下去即可运行。
Code as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<style>
body{margin:0px;}
</style>
<script>
//path参数为大图片地址
function zoom(path){
document.getElementById("layer").style.height = document.documentElement.scrollHeight;
document.getElementById("layer").style.display = "block";
document.getElementById("big").style.display = "block";
document.getElementById("big").innerHTML = "<img id='bigImage' onclick='hide()' src='"+path+"' style='cursor:pointer;'/>";
center();
}
function hide(){
document.getElementById("big").style.display = "none";
document.getElementById("layer").style.display = "none";
}
function center(){
try{
var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
var imageWidth = bigImage.offsetWidth;
var imageHeight = bigImage.offsetHeight;
document.getElementById("big").style.left = (screenWidth-imageWidth)/2+document.documentElement.scrollLeft;
document.getElementById("big").style.top = (screenHeight-imageHeight)/2+document.documentElement.scrollTop;
}catch(e){};
}
window.setInterval("center()", 100);
</script>
<div id="layer" style="position:absolute;background:#000;width:100%;height:100%;display:none;z-index:1000;filter:alpha(opacity=50)"></div>
<div id="big" style="position:absolute;width:1px;background:#ccc;display:none;z-index:1001;"></div>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>

<table border="1">
<tr>
<td>
1
</td>
<td>
<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" width="100" style='cursor:pointer;' onclick="zoom('http://t3.baidu.com/it/u=2450937187,3406010630&fm=3&gp=0.jpg')"/>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100" style='cursor:pointer;' onclick="zoom('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png')"/>
</td>
</tr>
</table>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
</body>
</html>

但愿对你有所帮助，
如若你有不清楚的，欢迎探讨。
淘宝会员：宜人家园

本回答由提问者推荐