下方点击小图标,上方显示大图标。
布局文件如下
<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-08-04 14:20:40