图片预览

转载

mb5ff2f19eb6087 2016-06-03 22:06:00

文章标签 html css 图片预览 click事件 javascript 文章分类 Html/CSS 前端开发

　　下方点击小图标，上方显示大图标。

　　布局文件如下

<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打开的路径。

图片预览_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里也是需要印好的。

图片预览_图片预览_02

　　这样的话预览的样式和真实的大小一样。

　　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>