ホームページ >ウェブフロントエンド >htmlチュートリアル >Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css_WEB-ITnose
Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:47:191553ブラウズ
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="/static/imghwm/default1.png" data-src="image/201411.jpg" class="lazy" / alt="Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png" data-src="image/201411.jpg" class="lazy" / alt="Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png" data-src="image/201411.jpg" class="lazy" / alt="Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png" data-src="image/201411.jpg" class="lazy" / alt="Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css_WEB-ITnose" ></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>
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宽度 */
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="/static/imghwm/default1.png" data-src="image/201411.jpg" class="lazy" 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="/static/imghwm/default1.png" data-src="image/load.jpg" class="lazy" height="32px" / alt="Webサイトの画像一覧を動的に表示し、画面幅に応じてDIVのCSSスタイルを動的に設定_html/css_WEB-ITnose" >显示更多结果</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 }; フロントエンド開発は初めてですが、知識は少しありますが、自分用に蓄積して投稿してみんなと共有します、ヒーローが自動的に通り過ぎます！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。