如何实现界面下图片的点击放大效果
1个回答
2017-02-22 · 百度认证:深圳联雅网络科技有限公司
联雅网络
联雅网络成立于2005年，是一家技术开发型的网络公司，致力于高端品牌网站建设，微信公众平台开发，是一支拥有一百多人的网站设计技术团队。分深圳联雅网络与广州联雅网络，一直专注网站建设领域
向TA提问
关注
![]()
展开全部
<!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
<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
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
