图片展示

来源:互联网 发布:固定收益部做什么 知乎 编辑:程序博客网 时间:2024/04/27 22:42
<%@ page language="java" import="java.util.*" 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">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>上传下载</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">
<link rel="stylesheet" type="text/css" 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");
var largeTitle = $(this).attr("title");
$("#largeImgs").attr({
src:largePath,
alt:largeTitle
});
return false;
});
});

</script>
  </head>
  
  <body>
    <h2>图片展示</h2>
    <p><img id="largeImg" src="images/img1-lg.jpg" alt="large Image" /></p>
    <p class="thumbs">
    <a href="images/img2-lg.jpg" title="image2"><img src="images/img2-thumb.jpg"></a>
    <a href="images/img3-lg.jpg" title="image3"><img src="images/img3-thumb.jpg"></a>
    <a href="images/img4-lg.jpg" title="image4"><img src="images/img4-thumb.jpg"></a>
    <a href="images/img5-lg.jpg" title="image5"><img src="images/img5-thumb.jpg"></a>
    <a href="images/img6-lg.jpg" title="image6"><img src="images/img6-thumb.jpg"></a>
    </p>
  </body>
</html>