頁面圖片浮動左右滑動效果的簡單實作案例_javascript技巧

核心程式碼：

1.css：16sucai.css

複製程式碼

複製程式碼 程式碼如下

html,body {
 height: 100%;
 margin: 0px;
 padding: 0px;
}
a {outline: none;}
img{ border:0;}
a img {vertical-align: top;}
a img.last {margin-right: 0; }
.box {
 width: 850px;
 height: auto;
 overflow: hidden;
 background: #666;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 10px;
 margin-left: auto;
 padding-top: 10px;
 padding-right: 0;
 padding-bottom: 0;
 padding-left: 10px;
}

.box ul {
 margin: 0px;
 padding: 0px;
 float: left;
 list-style-type: none;
}

.box li {
 width: 150px;
 height: 100px;
 float: left;
 cursor: pointer;
 display: inline;
 margin: 0 10px 10px 0;
 border: 5px solid #333;
}

#bg {
 width: 100%;
 height: 898px;
 position: absolute;
 left: 0px;
 top: 0px;
 background: #000;
 filter: alpha(opacity : 50);
 opacity: 0.5;
 display: none;
}

#bg1 {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0px;
 top: 0px;
 background: #000;
 filter: alpha(opacity : 50);
 opacity: 0.5;
 display: none;
}
#bottom {
 width: 215px;
 height: 50px;
 position: absolute;
 left: 50%;
 bottom: 0px;
 margin: 0 0 0 -107px;
 border: 1px solid #232323;
 background: #444;
 padding: 1px;
 z-index: 1;
 display: none;
}

#bottom ul {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 background: #000;
}

#bottom li {
 background: url(../images/ico.jpg) no-repeat;
 float: left;
 display: inline;
 margin: 8px 0 0 18px;
 cursor: pointer;
}

#bottom li.prev {
 width: 30px;
 height: 33px;
 background-position: 0 0;
}

#bottom li.next {
 width: 30px;
 height: 33px;
 background-position: -35px 0;
}

#bottom li.img {
 width: 30px;
 height: 33px;
 background-position: -106px 0;
}

#bottom li.close {
 width: 31px;
 height: 33px;
 background-position: -70px 0;
}

#frame {
 background: #fff;
 padding: 3px;
 position: absolute;
 z-index: 2;
 display: none;
 filter: alpha(opacity : 0);
 opacity: 0;
 text-align: center;
}

#bottom1 {
 width: 215px;
 height: 50px;
 position: absolute;
 left: 50%;
 bottom: 0px;
 margin: 0 0 0 -107px;
 border: 1px solid #232323;
 background: #444;
 padding: 1px;
 z-index: 1;
 display: none;
}

#bottom1 ul {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 background: #000;
}

#bottom1 li {
 background: url(../../images/ico.jpg) no-repeat;
 float: left;
 display: inline;
 margin: 8px 0 0 18px;
 cursor: pointer;
}

#bottom1 li.prev {
 width: 30px;
 height: 33px;
 background-position: 0 0;
}

#bottom1 li.next {
 width: 30px;
 height: 33px;
 background-position: -35px 0;
}

#bottom1 li.img {
 width: 30px;
 height: 33px;
 background-position: -106px 0;
}

#bottom1 li.close {
 width: 31px;
 height: 33px;
 background-position: -70px 0;
}

#frame1 {
 background: #fff;
 padding: 3px;
 position: absolute;
 z-index: 2;
 display: none;
 filter: alpha(opacity : 0);
 opacity: 0;
 text-align: center;
}
/
html,body {
 height: 100%;
 margin: 0px;
 font-size: 12px;
}

.mydiv {
 背景顏色：#FFCC66；
 背景：url(../images/loginbg.png) 無重複；
 邊框：0px 實心溢出#f00;
 :auto;
 溢出-x:auto;
 文字對齊：居中;
 行高：40px;
 字體大小：12px;
 字體粗細：粗體；
 z 索引字體粗細； ：999；
 寬度：434 像素；
 高度：238 像素；
 左：50%；
 頂部：50%；
 左邊距：-200 像素！重要; /*FF IE7 等於本身寬的一半*/
 margin-top: -80px !important; /*FF IE7 等於自身高的一半*/
 margin-top: 0px;
 position:固定！重要; /* FF IE7*/
 位置：絕對； /*IE6*/
 _top: 表達式(eval(document . compatMode &&
     documentElement .scrollTop    ( document .
  documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
  🎜>  clientHeight -   this .clientHeight )/ 2 ); / *IE5 IE5.5*/
}
.mydiv1 {
 背景顏色：#FFCC66;
邊框：0px 實線#f00;
 文字對齊：居中高：40 像素；
字體大小：12 像素；
字體粗細：粗體；
溢位-y：自動；
溢位-x：自動；
z 索引：999 ;
 寬度：434px；
 高度：238px；
 左：50%；
 頂部：50%；
 左邊距：-200px！ /*FF IE7 等於本身寬的一半 */
 margin-top: -80px !important; /*FF IE7 等於自身高的一半*/
 margin-top: 0px;
 position: 固定！重要; /* FF IE7*/
 位置：絕對； /*IE6*/
 _top: 表達式(eval(document . compatMode &&
     documentElement .scrollTop    ( document .
  documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
  🎜>  clientHeight -   this .clientHeight )/ 2 ); / *IE5 IE5.5*/
}
.bg,.popIframe {
 背景顏色: #666;
 顯示: 無;
 寬度: 100%;
 高度：1000 %;
左：0；
頂部：0； /*FF IE7*/
 過濾器：alpha(不透明度= 50); /*IE*/
 不透明度：0.5； / *FF*/
 z-index: 1;
 位置：固定！重要; /*FF IE7*/
 位置：絕對； /*IE6*/
 _top: 表達式(eval(document . compatMode &&
     documentElement .scrollTop    ( document .
  documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
  🎜>  clientHeight -   this .clientHeight )/ 2 );
}

.popIframe {
 過濾器：alpha(不透明度= 0); /*IE*/
 不透明度：0； /*FF*/
}

2.js事件：

複製程式碼
程式碼如下：

 
  
   function aa(id){
    var ID = id.substring(1,2);
    var obj2 = document.getElementById(ID);;
   function showInfo(id)
  {
   document.getElementById(id).style.display = "block";
  }
  function = "block";
  }
  function = Info(id) 🎜> .getElementById(id).style.display = "none";
  }
  
 

複製代碼

程式碼如下：

         "table_01">
        
         
          
           
             begin="" end="" varStatus="strs">

              ul>

                       
              

               
• 
                   
                      6}" > 
                    " /> 
                     當>
                            
         >                 
               line-height:20px"> 上傳時間：

               
• 圖片大小：${image.影像大小 }

                    

          
          

;
            /c:其他>
         選擇>
       

             暫時圖片沒有資訊          當>
         
       
       
       int我= 0; ; 3; i ) {%>
           

                     

                  

            

             

           

li>