您的位置：首页 > Web前端 > JavaScript

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

2007-08-27 11:53 936 查看

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

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 ++;
}

<%@ 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">

<head>

<%@ include file="/common/style.jsp" %>

<%@ include file="/common/script.jsp" %>

</head>

<%@ include file="/common/nav.jsp" %>

<hr>

<%@ include file="/common/user_nav.jsp" %>

<hr/>

<%@ include file="/common/menu.jsp" %>

<hr/>

</a>

</div>

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"");%> >

</a>

<%}%>

</div>

</a>

</div>

height="900" scrolling=no frameborder=0 marginheight=0 marginwidth=0></iframe>

</div>

<hr/>

<%@ include file="/common/foot.jsp" %>

</div>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航