下方点击小图标，上方显示大图标。
布局文件如下
<body>
<h1>图片预览</h1>
<p>
<img id="largeImg" src="images/img1-lg.jpg" alt="Large Image" />
</p>
<p class="thumbs">
<!-- 点击小图片 看到大图片 只是超连接的话 会新打开页面，但是咱们需要的是在上方打开大图标 -->
<a href="images/img2-lg.jpg"><img src="images/img2-thumb.jpg"></a>
<a href="images/img3-lg.jpg"><img src="images/img3-thumb.jpg"></a>
<a href="images/img4-lg.jpg"><img src="images/img4-thumb.jpg"></a>
<a href="images/img5-lg.jpg"><img src="images/img5-thumb.jpg"></a>
<a href="images/img6-lg.jpg"><img src="images/img6-thumb.jpg"></a>
</p>
</body>
注意：如果把jsp页面放在jsp文件夹中，那么上面的路径就不对了，需要".../images/"，直接“”images“”会认为images在jsp文件加下。另外看下方的超链接，不重新定义超链接的click时间的话，默认在本页面打开，需要
<script type="text/javascript">
$(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
$("#largeImg").attr({src:largePath})
/* 因为click事件默认在当前页打开，需要阻止 */
return false;
});
});
</script>
获取，超链接的click事件，设置click打开的路径。
使用js进行图片预览
<form action="" > <!-- 注意input那边一定要有斜杠 否则 一直有问题 --> 请选择图片<input type="file" onchange="showPreviewImg(this)" /> <div id="previewImg"></div> </form>
注意：input后面要有一个反斜杠，type是file类型，上上传的时候出发onchangge事件，然后把图片显示在下方的div即可。
function showPreviewImg(obj) {
var str = obj.value;
document.getElementById("previewImg").innerHTML="<img src='"+str+"'/>";
}
注意：img的src里也是需要印好的。
这样的话 预览的样式和真实的大小一样。
jquery实现预览，鼠标移动上去显示大图，移开不显示
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/common.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js">
</script>
<script type="text/javascript">
$(function() {
$(".thumbs a").click(function() {
var largePath = $(this).attr("href");
$("#largeImg").attr({
src : largePath
})
/* 因为click事件默认在当前页打开，需要阻止 */
return false;
});
/* 是id选择器，原来没加上#好 一直不成功 */
$("#myfile").change(function(){
$("#previewImg").attr("src","file:///" + $("#myfile").val());
});
var la = $("#large");
la.hide();
$("#previewImg").mousemove(function(e) {
la.css({
top : e.pageY,
left : e.pageX
}).html('<img src = "' + this.src + '" />').show();
}).mouseout(function() {
la.hide();
});
});
/* function showPreviewImg(obj) {
var str = obj.value;
document.getElementById("previewImg").innerHTML="<img src='"+str+"'/>";
} */
</script>
</head>
<body>
<img id="previewImg" src="images/preview.jpg" width="80" height="80" />
<form action="">
<!-- 注意input那边一定要有斜杠 否则 一直有问题 -->
请选择图片<input id="myfile" type="file" onchange="showPreviewImg(this)" />
<!-- <div id="previewImg"></div> -->
</form>
<div id="large"></div>
<h1>图片预览</h1>
<p>
<img id="largeImg" src="images/img1-lg.jpg" alt="Large Image" />
</p>
<p class="thumbs">
<!-- 点击小图片 看到大图片 只是超连接的话 会新打开页面，但是咱们需要的是在上方打开大图标 -->
<a href="images/img2-lg.jpg"><img src="images/img2-thumb.jpg"></a>
<a href="images/img3-lg.jpg"><img src="images/img3-thumb.jpg"></a>
<a href="images/img4-lg.jpg"><img src="images/img4-thumb.jpg"></a>
<a href="images/img5-lg.jpg"><img src="images/img5-thumb.jpg"></a>
<a href="images/img6-lg.jpg"><img src="images/img6-thumb.jpg"></a>
</p>
</body>
</html>
注意：选择器不要写错，id还是类，不多多少引号。
时间： 2024-11-05 19:41:25