界面上有一个图片 点击后图片放大（人人网上点击相片的效果），在弹出的窗口上图片变大。 这个怎么才能实现？
解决方案 »
- flash问题
- 关于cookie的小问题
- java中如何解压、解析、读取iso的文件？
- 关于页面删除的问题
- 急用，在线等，hibernate hql查询
- html中的select控件问题
- 想问一下如何动态的定制表格显示字段？？？
- 请教------为什么在Jbuilder2006中,修改程序后,原来的WEB-INF/CLASS目录下的*.class文件不能更新.
- 讨论一下，大家在一个.jsp里，如果要查询数据库5次，大家是取5次连接，再5次释放，还是一次连接，最后一次释放？？
- JS发布到服务器上，有的用户访问到更新的JS页面，还是显示老版本的JS，更新上去的没有起作用！！！求教！！！
- servlet里面用script弹框为什么不显示那
- 富文本控件怎么把数据存放到数据库中？？？？
2. 点击后显示放大图的div，在这个div里加载大图
<!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>
<title>JS放大或者缩写</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.zoomPan{width:570px;left:100px;position:relative; }
.sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;}
#zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;}
#zoom img{position:relative;}
h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;}
h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;}
</style>
</head>
<body>
<h1>zoom</h1>
<div class="zoomPan" id="zoomPan">
<img src="/jscss/demoimg/201008/s.jpg" alt="" />
<div id="zoom" class="sh"><img src="/jscss/demoimg/201008/b.jpg" alt="" /></div>
</div>
<h4>code.js.cn</h4>
</body>
<script type="text/javascript">
//<![CDATA[
function zoomBox() {this.index.apply(this, arguments)}
zoomBox.prototype = {
index: function(win,zoom) {
var win=document.getElementById(win);
var box=document.getElementById(zoom);
var img=box.getElementsByTagName('IMG')[0];
var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
var z=Math.round(box.offsetWidth/2);
win.onmousemove=function (e){
e = e || window.event;
var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();
if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';
x-=ori.left;
y-=ori.top;
box.style.left=x-z+'px';
box.style.top=y-z+'px';
img.style.left=-x*zoom+z+'px';
img.style.top=-y*zoom+z+'px';
}
win.onmouseover=function (){box.style.display=''}
}
};
window.onload=function (){
x=new zoomBox('zoomPan','zoom')
}
//]]>
</script>
</html>
楼主自己试一下。
嗯 弹出DIV 怎么实现呢？
先把大图片放到一个div里，然后在那div里设置display:none;隐藏起来
然后再通过点击事件后改变大图片的div属性display:block;