网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css

집

웹 프론트엔드

HTML 튜토리얼

网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

 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="网站图片列表动态显示、根据屏幕宽度动态设置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="网站图片列表动态显示、根据屏幕宽度动态设置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="网站图片列表动态显示、根据屏幕宽度动态设置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="网站图片列表动态显示、根据屏幕宽度动态设置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="网站图片列表动态显示、根据屏幕宽度动态设置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으로 문의하세요.

관련 기사

HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AM

HTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.

HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AM

HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.

마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AM

HTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.

HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

See all articles