图片预览
下方点击小图标,上方显示大图标。
布局文件如下
<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还是类,不多多少引号。
作者:火星十一郎
本文版权归作者火星十一郎所有,欢迎转载和商用,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.