网页图片放大与切换实现-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_19700/article/details/82581105

具体请点击：http://www.verydemo.com/demo_c98_i22382.html

js放大图片大小
就是简单改变图片的长度或者宽度。，当然了，如果使两张图片，大小图切换
也可以达到要求，反正不管怎么做就是要点这一张图片，这张图片就放大，点另一张，另一张就放大，之前的图片恢复正常大小。

下面是我做的一个，但是做到这里就不会了，以前学的web技术忘光了，谁帮我做出来，给100分。谢谢

以下仅供参考：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

<body>
点击图片放大，点另一张时，上次放大的图片恢复正常. <br>
<img id="m1" src="am1.jpg" heiht="100" width="100" οnclick="ck(m1)"/>图片一<br/>
<img id="m2" src="am1.jpg" heiht="100" width="100" οnclick="ck(m2)"/>图片二<br/>
<img id="m3" src="am1.jpg" heiht="100" width="100" οnclick="ck(m3)"/>图片三<br/>

<script type="text/javascript">
function ck (x) {
m1.style.pixelHeight="200";
m2.style.pixelWidth="200";
...

}
</script>
</body>
</html>

------解决方案--------------------------------------------------------
function ck (x) {
m1.Height="200";
m2.Width="200";
}

------解决方案--------------------------------------------------------
可以写一个css有zoom:n (n代表放大的倍数)，然后通过添加和去除css达到放大效果
或者直接方法改变该值也行

js放大图片大小解决思路