日期:2014-05-18  浏览次数:20575 次

ASP.NET 百度图片效果或者QQ相册效果怎么实现?
ASP.NET 百度图片效果或者QQ相册效果怎么实现?
那位能给一个完整源码。

代码完整着分数全归你!!

Thanks!!!


------解决方案--------------------
HTML code
<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Imgmove</title>
<style type="text/css">
#show{height:auto;width:700px; text-align:center; margin-bottom:15px;border:1px solid #FFFFFF;display: inline-table}
#show img{ text-align:center; }
#container{  height:auto; width:613px; text-align:center; display: inline-table}
#left{ height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif); margin-top:5px; margin-right:10px;}
#middle{ height:109px;  width:545px; float:left; overflow:hidden;}
#thumblist{ width:1090px;}
#thumblist div { width:109px; height:109px; text-align:center; float:left}
.cc{width:109px; height:109px; text-align:center; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011452785.p.gif)}
#thumblist div span { width:95px; height:95px; margin:6px !important;margin:3px; margin-top:6px; border:1px solid #FFFFFF; background-color:#000000; vertical-align:middle; line-height:95px; display:block}
#thumblist div span img { width:100%; height:100%; display:block}
#right{height:97px; width:24px; float:left;  background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif);margin-top:5px; margin-left:10px}
</style>
</head>
<body style="background-color:#FFFFFF; text-align:center" >

<div id="container">
    <div id='show'><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'></div>
    <div id="left"></div>
    <div id="middle">
        <div id="thumblist">
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811863.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811894.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811457.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811769.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811738.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811613.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811566.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811472.p.gif'></span>
            </div>
            <div >
               <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812004.p.gif'></span>
            </div>