你的位置:首页 > 网页设计

[网页设计]网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式


 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html "http://www.w3.org/1999/xhtml"> 3 <head> 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5   <title>示例</title> 6   <link href="Styles/demo.css" rel="stylesheet" type="text/css" /> 7   <script src="jquery/jquery-1.4.4.min.js" type="text/javascript"></script> 8   <script src="jquery/jquery-1.4.4.src.js" type="text/javascript"></script> 9   <script src="jquery/demo.js" type="text/javascript"></script>10 </head>11 <body>12   <div class="top">13   </div>14   <div class="list">15     <div class="img_list" id="img_list">16       <div class="items" id="items">17         <ul class="item">18           <li class="i_thumb"><a href="#" target="_blank">19             <img src="image/201411.jpg" /></a></li>20           <li class="i_title"><span class="order">1</span><a href="#" target="_blank">图片</a></li>21         </ul>22         <ul class="item">23           <li class="i_thumb"><a href="#" target="_blank">24             <img src="image/201411.jpg" /></a></li>25           <li class="i_title"><span class="order">2</span><a href="#" target="_blank">图片</a></li>26         </ul>27         <ul class="item">28           <li class="i_thumb"><a href="#" target="_blank">29             <img src="image/201411.jpg" /></a></li>30           <li class="i_title"><span class="order">3</span><a href="#" target="_blank">图片</a></li>31         </ul>32         <ul class="item">33           <li class="i_thumb"><a href="#" target="_blank">34             <img src="image/201411.jpg" /></a></li>35           <li class="i_title"><span class="order">4</span><a href="#" target="_blank">图片</a></li>36         </ul>37         <div class="clear">38         </div>39       </div>40       <div class="showmore" id="showmore">41         <a class="handle" href="javascript:show()">显示更多结果</a></div>42     </div>43   </div>44 </body>45 </html>

Html Code
 1 img 2 { 3   border: 0; 4 } 5 a 6 { 7   cursor: pointer; 8   color: #014ccc; 9   text-decoration: underline; 10 } 11 a:hover 12 { 13   text-decoration: none; 14 } 15 .clear 16 { 17   clear: both; 18   height: 0px; 19   overflow: hidden; 20 } 21 .img_list 22 { 23   margin: 0 auto; 24 } 25 .img_list li 26 { 27   list-style: none; 28 } 29 .img_list .items 30 { 31   margin: 0 auto; 32 } 33 .img_list .item 34 { 35   width: 260px; 36   float: left; 37   margin-bottom: 5px; 38   font-size: 14px; 39 } 40 .img_list .item .order 41 { 42   display: inline-block; 43   width: 28px; 44   color: #f30; 45 } 46 .img_list .item .i_thumb 47 { 48   width: 100%; 49   height: 280px; 50 } 51 .img_list .item .i_title 52 { 53   width: 100%; 54   height: 20px; 55 } 56 .showmore 57 { 58   height: 35px; 59   background: #f8f8f8; 60   border-bottom: 1px solid #cccccc; 61   cursor: pointer; 62   text-align: center; 63   margin-bottom: 25px; 64 } 65 .showmore .handle 66 { 67   display: block; 68   height: 35px; 69   text-align: center; 70   color: #909090; 71   font-size: 14px; 72   text-decoration: none; 73   line-height: 35px; 74 } 75 .showmore .handle:hover 76 { 77   text-decoration: none; 78   background: #e6e6e6; 79 } 80 .top 81 { 82   width: 100%; 83   height: 100px; 84   border: 1px solid #000; 85 } 86 .list 87 { 88   margin: 0 auto; 89   margin-top: 20px; 90   width: 1200px; 91   border: 1px solid #000; 92 } 93 @media screen and (min-width: 1201px) 94 { 95   .list 96   { 97     width: 1200px; 98   } 99 }100 /* css 注释说明:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */101 /*102     @media screen and (max-width: 1200px)103     {104       .list105       {106         width: 900px;107       }108     }*/109 /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */110 /*111     @media screen and (max-width: 900px)112     {113       .list114       {115         width: 200px;116       }117     }118     */119 /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */120 /*121     @media screen and (max-width: 500px)122     {123       .list124       {125         width: 100px;126       }127     }128     */129 /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

demo.css
 1 var iHeight = 0; 2 var iTop = 0; 3 var clientHeight = 0; 4 var iIntervalId = null; 5 var itemsSize = 0; 6 var pageNo = 1;  // 当前页数,默认设为第 1 页 7 var pageSize = 4; // 每页显示的数量 8  9 getPageHeight(); 10  11 // 添加定时检测事件,每2秒检测一次 12 iIntervalId = setInterval("_onScroll();", 2000); 13  14 // 取得当前页面显示所占用的高度 15 function getPageHeight() { 16   if (document.body.clientHeight && document.documentElement.clientHeight) { 17     clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; 18   } else { 19  20     clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; 21   } 22  23   iHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 24 } 25  26 // 调用ajax取服务端数据 27 function show() { 28   //      pageNo++; 29   //      $.ajax({ 30   //        url: 'Handler.ashx?p=' + pageNo + '&r=' + Math.random(), 31   //        type: 'GET', 32   //        dataType: 'text', 33   //        timeout: 4000, 34   //        beforeSend: showLoadingImg, 35   //        error: showFailure, 36   //        success: function (date){ 37   //把取出的数据转换为html 38   //        } 39   //      }); 40   showDate(); 41 } 42  43 function showDate() { 44   var pageOffset = (pageNo - 1) * pageSize + 1; 45   itemsSize = 8; 46   var nextpagehtml = ''; 47   for (i = 0; i < itemsSize; i++) { 48     nextpagehtml += '<ul >'; 49     nextpagehtml += '<li ><a href="#" target="_blank" title="tupian"><img src="image/201411.jpg" alt="1" /></a></li>'; 50     nextpagehtml += '<li ><span >' + (pageOffset + i) + '</span><a href="#" target="_blank" title="tupian">链接</a></li>'; 51  52     nextpagehtml += '</ul>'; 53   } 54   nextpagehtml += '<div ></div>'; 55   $('#items').html($('#items').html() + nextpagehtml); 56  57   // 当前页码数小于3页时继续显示更多提示框 58   if (pageNo < 3) { 59     $('#showmore').html('<a href="javascript:show()">显示更多结果</a>'); 60   } else { 61     clearInterval(iIntervalId); 62     $('#showmore').hide(); 63   } 64 } 65  66 function showLoadingImg() { 67   $('#showmore').html('<a href="javascript:show()"><img src="image/load.jpg" height="32px" />显示更多结果</a>'); 68 } 69  70 function showFailure() { 71   $('#showmore').html('<font color=red> 获取查询数据出错 </font>'); 72 } 73  74 // 判断滚动条是否到达底部 75 function reachBottom() { 76   var scrollTop = 0; 77   if (document.documentElement && document.documentElement.scrollTop) { 78     scrollTop = document.documentElement.scrollTop; 79   } else if (document.body) { 80     scrollTop = document.body.scrollTop; 81   } 82   if ((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) { 83     return true; 84   } else { 85     return false; 86   } 87 } 88  89 // 检测事件,检测滚动条是否接近或到达页面的底部区域,0.99是为了更接近底部时 90 function _onScroll() { 91   iTop = document.documentElement.scrollTop + document.body.scrollTop; 92   getPageHeight(); 93   if (((iTop + clientHeight) > parseInt(iHeight * 0.99)) || reachBottom()) { 94     if (pageNo >= 3) { 95       clearInterval(iIntervalId); 96       $('#showmore').hide(); 97       return; 98     } 99     show();100   }101 };

demo.js

  初涉前端开发,一点小知识,积累下来自己用,贴出来大家共享,大侠自动飘过哈!