网站图片列表动态显示、根据屏幕宽度动态设置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 xmlns="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             .list
105             {
106                 width: 900px;
107             }
108         }*/
109 /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
110 /*
111         @media screen and (max-width: 900px)
112         {
113             .list
114             {
115                 width: 200px;
116             }
117         }
118         */
119 /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
120 /*
121         @media screen and (max-width: 500px)
122         {
123             .list
124             {
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 class="item">';
 49         nextpagehtml += '<li class="i_thumb"><a href="#" target="_blank" title="tupian"><img src="image/201411.jpg" alt="1" /></a></li>';
 50         nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="#" target="_blank" title="tupian">链接</a></li>';
 51 
 52         nextpagehtml += '</ul>';
 53     }
 54     nextpagehtml += '<div class="clear"></div>';
 55     $('#items').html($('#items').html() + nextpagehtml);
 56 
 57     // 当前页码数小于3页时继续显示更多提示框
 58     if (pageNo < 3) {
 59         $('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
 60     } else {
 61         clearInterval(iIntervalId);
 62         $('#showmore').hide();
 63     }
 64 }
 65 
 66 function showLoadingImg() {
 67     $('#showmore').html('<a class="handle" 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

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

 

posted @ 2015-03-27 12:02  史进  阅读(1327)  评论(0)    收藏  举报