如何用JSP实现 浏览百度图片的效果

如题，百度图片的浏览是 左边大图 右边是可以上下滚动的缩略图。
jsp 怎么实现呢？ 关键是那个缩略图可以上下滚动。

解决方案 »

  1.   

    用jquery偶以前做过一个类似的，主要是用了jquery的animate这个函数，外加ajax。。
      

  2.   

    楼主如果JS或JS框架学的不好的话,最好别做这个.
      

  3.   

    给你个例子，不过没有图片，而且还要导入jquery的js文件，你只能自己弄了。<%@ page language="java" pageEncoding="utf-8"%>
    <%@ taglib uri="/struts-tags" prefix="s" %>
    <html>
    <head>
    <%int count = 57; %>
    <script src="js/jquery-ui-1.8.2.all/js/jquery-1.4.2.min.js"></script>
    <script>
    var itemCount = <%=count%>;
    var moveWindowWidth = itemCount*65+5;
    var times = 400;
    var moveLong = 655-5;
    var position = 0;
    var isSeeNext = true;
    $(function()
    {
    $("#moveWindow").css({"width":moveWindowWidth});
    });
    function seeNext()
    {
    if(position <= -(moveWindowWidth-655))
    {
    document.getElementById("right").src = "image/outright.png";
    return;
    }
    position -= moveLong;
    moves();
    if(!isSeeNext)
    {
    isSeeNext = true;
    }
    if(position <= -(moveWindowWidth-655))
    {
    document.getElementById("right").src = "image/outright.png";
    }
    else
    {
    document.getElementById("right").src = "image/overright.png";
    }
    document.getElementById("left").src = "image/overleft.png";
    }
    function seeBefore()
    {
    if(position >= 0)
    {
    return;
    }
    position += moveLong;
    moves();
    if(isSeeNext)
    {
    isSeeNext = false;
    }
    if(position >= 0)
    {
    document.getElementById("left").src = "image/outleft.png";
    }
    else
    {
    document.getElementById("left").src = "image/overleft.png";
    }
    document.getElementById("right").src = "image/overright.png";
    }

    function moves()
    {
    <% 
    for(int i = 1;i < count;i++)
    {
    out.print("$(\"#test" +i+ "\").animate({left:position},times);");
    }
    %>
    }
    </script>
    </head>
    <body>
    <%
    java.util.List<java.util.Map<String,Object>> list = new java.util.ArrayList<java.util.Map<String,Object>>(); 
    for(int i = 1;i < count;i++)
    {
    java.util.Map<String,Object> map = new java.util.HashMap<String,Object>();
    map.put("num",i);
    map.put("name",i);
    list.add(map);
    }
    request.setAttribute("list",list);
    %>
    <div id="mainWindow" style="background-color:#F2F2F2;width:720px;height:80px;border:1px solid #CCCCCC;">
    <div id="title" style="height:30px;background-image:url(image/title.png);">
    </div>
    <div style="margin-top:-5px;">
    <div style="float:left;position:relative;width:30px;text-align:center;">
    <img id="left" src="image/outleft.png" style="cursor:pointer;" onclick="seeBefore()"/>
    </div>
    <div id="showWindow" style="overflow:hidden;width:655px;float:left;">
    <div id="moveWindow" style="height:50px;">
    <s:iterator id="list" value="#request.list" status="st">
    <table id='test<s:property value="#st.index+1"/>' style="background-image:url(image/background1.PNG);width:60px;height:33px;margin-left:5px;position:relative;float:left;top:10px;">
    <tr>
    <td style="font-size:9pt;text-align:center;">第<s:property value="#st.index+1"/>题</td>
    </tr>
    <tr>
    <td style="font-size:5pt;color:red;text-align:center;">X</td>
    </tr>
    </table>
    </s:iterator>
    </div>
    </div>
    <div style="float:left;position:relative;width:30px;text-align:center;">
    <img id="right" src="image/overright.png" style="cursor:pointer;" onclick="seeNext()"/>
    </div>
    </div>
    </div>
    </body>
    </html>
      

  4.   

    建议网上搜索下jQuery图片插件
    比如我就曾经下载几个比较好的，我下载的几个放到自己项目下就能用，楼主想要的话加我QQ 412834561
      

  5.   

    http://www.enet.com.cn/article/2010/0708/A20100708682965.shtml