本文介绍了一个使用Iframe实现照片预览的应用案例，通过点击不同图片，Iframe中的内容会相应改变，同时支持图片左右切换浏览。
iframe并不是很常用的，在标准的网页中非常少用。通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面,在最近的项目开发中,需要涉及到iframe的知识,现整理如下,以供日后参考:
<%@ page contentType="text/html;charset=utf-8" %><%@ page import="org.springframework.web.bind.ServletRequestUtils" %><%@ page import="com.ouou.album.service.beans.UserRole" %><%@ page import="java.util.List" %><%@ page import="com.ouou.album.model.Albums" %><%@ page import="com.ouou.album.model.*" %><%@ include file="/common/taglib.jsp" %><%@ include file="/common/global.jsp" %><%! private final static int pageSize = 7;%><% int albumId=0; int phId = ServletRequestUtils.getIntParameter(request, "id", 0); Photos photos = photosManager.getPhoto(phId); Albums albums = albumsManager.getAlbumsByPhotoId(phId); List<Photos> photosList;
if (null != photos) { //当传递参数是id时,判断用户权限
if (photos.getUserId() != user.getUid()) {
out.println("<script>alert('您无权访问此相片！');history.back();</script>"); return;
} }else{ //当相片和相册名称都不存在时 out.println("<script>alert('该相片已不存在或被删除！');history.back();</script>"); return;
} if(null!=albums){ albumId = albums.getAlbumId(); } photosList = photosManager.getPhotos(albumId, UserRole.manager); //有相册id得到所有相片列表 int totolNum =photosList.size(); //相片的数目%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <meta content="zh-CN" http-equiv="Content-Language"/> <meta name="robots" content="all"/> <%@ include file="/common/style.jsp" %> <%@ include file="/common/script.jsp" %></head><body id="zzxpgl"><div id="main"> <%@ include file="/common/nav.jsp" %> <hr> <div id="content"> <%@ include file="/common/user_nav.jsp" %> <hr/> <div id="c_02"> <%@ include file="/common/menu.jsp" %> <hr/> <div id="mid"> <h3 id="m_01"></h3> <div id="m_02"> <div id="m_2_1"> <a href="#" id="left" onclick="left_move();"> <img src="/img/8/shim.gif"/> </a> </div> <div id="m_2_2"> <div id="m_2_2_1"> <% for (int i = 0;i < photosList.size(); i++) { Photos photo = photosList.get(i); %> <a id="photo_<%=i%>" href="javascript:void(Iframe.document.location ='/manage/picBig.do?id=<%=photo.getPhotoId()%>')" <%if (i >= pageSize) out.println("style="display:none"");%> > <img src="/photo?type=1&pid=<%=photo.getPhotoId()%>"/> </a> <%}%> </div> </div> <div id="m_2_3"> <a href="#" id="right" onclick="right_move();"> <img onclick="" src="/img/8/shim.gif"/> </a> </div> </div> <iframe id="Iframe" name="Iframe" src="/manage/picBig.do?id=<%=phId%>" width="100%" height="900" scrolling=no frameborder=0 marginheight=0 marginwidth=0></iframe> </div> </div> </div> <hr/> <%@ include file="/common/foot.jsp" %></div><script type="text/javascript"> var curPosition = 0; var total =<%=totolNum%>; var size =<%=pageSize%>; function left_move() { if (curPosition == 0) return; var left = curPosition - 1; var right = curPosition + size - 1; $("photo_" + right).style.display = "none"; $("photo_" + left).style.display = "block"; curPosition = left; } function right_move() { if (total - (size + curPosition) <= 0) return; var right = curPosition + size; $("photo_" + curPosition).style.display = "none"; $("photo_" + right).style.display = "block"; curPosition ++; }</script></body></html>以上实现了点击任一张照片,Iframe的内容发生相应改变,picBig是Iframe的内容,是另外的html页面;并且图片可以在一定范围内左移或是右移,效果请看下面的图片:
http://blog.youkuaiyun.com/houhy/gallery/image/159229.aspx
注:详细介绍iframe的网址: http://www.blabla.cn/html_examples/038_iframe.html
扫一扫
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
