Iframe的简单应用,js实现图片左右移动

      iframe并不是很常用的，在标准的网页中非常少用。通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面,在最近的项目开发中,需要涉及到iframe的知识,现整理如下,以供日后参考:
<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>

<% @ 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.csdn.net/houhy/gallery/image/159229.aspx

   注:详细介绍iframe的网址: http://www.blabla.cn/html_examples/038_iframe.html