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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>示例</title>

     <link href="Styles/demo.css" rel="stylesheet" type="text/css" />

     <script src="jquery/jquery-1.4.4.min.js" type="text/javascript"></script>

     <script src="jquery/jquery-1.4.4.src.js" type="text/javascript"></script>

     <script src="jquery/demo.js" type="text/javascript"></script>

 </head>

 <body>

     <div class="top">

     </div>

     <div class="list">

         <div class="img_list" id="img_list">

             <div class="items" id="items">

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <ul class="item">

                     <li class="i_thumb"><a href="#" target="_blank">

                         <img src="data:image/201411.jpg" /></a></li>

                     <li class="i_title"><span class="order"></span><a href="#" target="_blank">图片</a></li>

                 </ul>

                 <div class="clear">

                 </div>

             </div>

             <div class="showmore" id="showmore">

                 <a class="handle" href="javascript:show()">显示更多结果</a></div>

         </div>

     </div>

 </body>

 </html>

Html Code

 img

 {

     border: ;

 }

 a

 {

     cursor: pointer;

     color: #014ccc;

     text-decoration: underline;

 }

 a:hover

 {

     text-decoration: none;

 }

 .clear

 {

     clear: both;

     height: 0px;

     overflow: hidden;

 }

 .img_list

 {

     margin:  auto;

 }

 .img_list li

 {

     list-style: none;

 }

 .img_list .items

 {

     margin:  auto;

 }

 .img_list .item

 {

     width: 260px;

     float: left;

     margin-bottom: 5px;

     font-size: 14px;

 }

 .img_list .item .order

 {

     display: inline-block;

     width: 28px;

     color: #f30;

 }

 .img_list .item .i_thumb

 {

     width: %;

     height: 280px;

 }

 .img_list .item .i_title

 {

     width: %;

     height: 20px;

 }

 .showmore

 {

     height: 35px;

     background: #f8f8f8;

     border-bottom: 1px solid #cccccc;

     cursor: pointer;

     text-align: center;

     margin-bottom: 25px;

 }

 .showmore .handle

 {

     display: block;

     height: 35px;

     text-align: center;

     color: #;

     font-size: 14px;

     text-decoration: none;

     line-height: 35px;

 }

 .showmore .handle:hover

 {

     text-decoration: none;

     background: #e6e6e6;

 }

 .top

 {

     width: %;

     height: 100px;

     border: 1px solid #;

 }

 .list

 {

     margin:  auto;

     margin-top: 20px;

     width: 1200px;

     border: 1px solid #;

 }

 @media screen and (min-width: 1201px)

 {

     .list

     {

         width: 1200px;

     }

 }

 /* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

 /*

         @media screen and (max-width: 1200px)

         {

             .list

             {

                 width: 900px;

             }

         }*/

 /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

 /*

         @media screen and (max-width: 900px)

         {

             .list

             {

                 width: 200px;

             }

         }

         */

 /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */

 /*

         @media screen and (max-width: 500px)

         {

             .list

             {

                 width: 100px;

             }

         }

         */

 /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

demo.css

 var iHeight = ;

 var iTop = ;

 var clientHeight = ;

 var iIntervalId = null;

 var itemsSize = ;

 var pageNo = ;   // 当前页数，默认设为第 1 页

 var pageSize = ; // 每页显示的数量

 getPageHeight();

 // 添加定时检测事件，每2秒检测一次

 iIntervalId = setInterval("_onScroll();", );

 // 取得当前页面显示所占用的高度

 function getPageHeight() {

     if (document.body.clientHeight && document.documentElement.clientHeight) {

         clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;

     } else {

         clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;

     }

     iHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

 }

 // 调用ajax取服务端数据

 function show() {

     //            pageNo++;

     //            $.ajax({

     //                url: 'Handler.ashx?p=' + pageNo + '&r=' + Math.random(),

     //                type: 'GET',

     //                dataType: 'text',

     //                timeout: 4000,

     //                beforeSend: showLoadingImg,

     //                error: showFailure,

     //                success: function (date){

     //把取出的数据转换为html

     //                }

     //            });

     showDate();

 }

 function showDate() {

     var pageOffset = (pageNo - ) * pageSize + ;

     itemsSize = ;

     var nextpagehtml = '';

     for (i = ; i < itemsSize; i++) {

         nextpagehtml += '<ul class="item">';

         nextpagehtml += '<li class="i_thumb"><a href="#" target="_blank" title="tupian"><img src="data:image/201411.jpg" alt="1" /></a></li>';

         nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="#" target="_blank" title="tupian">链接</a></li>';

         nextpagehtml += '</ul>';

     }

     nextpagehtml += '<div class="clear"></div>';

     $('#items').html($('#items').html() + nextpagehtml);

     // 当前页码数小于3页时继续显示更多提示框

     if (pageNo < ) {

         $('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');

     } else {

         clearInterval(iIntervalId);

         $('#showmore').hide();

     }

 }

 function showLoadingImg() {

     $('#showmore').html('<a class="handle" href="javascript:show()"><img src="data:image/load.jpg" height="32px" />显示更多结果</a>');

 }

 function showFailure() {

     $('#showmore').html('<font color=red> 获取查询数据出错 </font>');

 }

 // 判断滚动条是否到达底部

 function reachBottom() {

     var scrollTop = ;

     if (document.documentElement && document.documentElement.scrollTop) {

         scrollTop = document.documentElement.scrollTop;

     } else if (document.body) {

         scrollTop = document.body.scrollTop;

     }

     if ((scrollTop > ) && (scrollTop + clientHeight == iHeight)) {

         return true;

     } else {

         return false;

     }

 }

 // 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时

 function _onScroll() {

     iTop = document.documentElement.scrollTop + document.body.scrollTop;

     getPageHeight();

     if (((iTop + clientHeight) > parseInt(iHeight * 0.99)) || reachBottom()) {

         if (pageNo >= ) {

             clearInterval(iIntervalId);

             $('#showmore').hide();

             return;

         }

         show();

     }

 };

demo.js

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

网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式的更多相关文章

根据屏幕大小动态设置字体rem
1.根据屏幕大小动态设置字体rem var docEl = document.documentElement, //当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时, //注意现在当浏 ...
动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
JavaScript动态设置div的样式的方法
有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...
jQuery动态追加移除CSS样式
jQuery基础知识,动态添加删除CSS样式 <!DOCTYPE html> <html lang="en"> <head> <meta ...
js 动态设置 div 背景图片并滚动显示
var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/sty ...
动态设置Div坐标
<style type="text/css"> #main{text-align:center; background-color:#9FF; height:600px ...
Js 动态设置DIV日期信息
HTML代码如下: <div id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...
JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式
代码如下: <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024="&qu ...
jQuery 动态添加、删除css样式
1.addClass css中: <style type="text/css"> .chColor {background: #267cb7;color:w ...

随机推荐

Python学习入门基础教程(learning Python)--5 Python文件处理
本节主要讨论Python下的文件操作技术. 首先,要明白为何要学习或者说关系文件操作这件事?其实道理很简单,Python程序运行时,数据是存放在RAM里的,当Python程序运行结束后数据从RAM被清 ...
PHP 生成UUID的方法
. . . ...
比较好用的sql语句
判断a表中有而b表中没有的记录 select a.* from tbl1 a left join tbl2 b on a.key = b.key where b.key is null 虽然使用in也 ...
DSOframer 的简单介绍和资源整理
DSOframer 是微软提供一款开源的用于在线编辑 Word. Excel .PowerPoint 的 ActiveX 控件.国内很多著名的 OA 中间件,电子印章,签名留痕等大多数是依此改进而来的 ...
c#变量在for循环内声明与外的区别
1.这样写是错误的 #region 有这样的一个字符串类型的数组{"老杨","老苏","老马","老牛"};要求变换成 ...
MVC 使用PageList进行分页
1.新建MVC项目 2.在Web项目下添加PagedList nuget 命令 :install-package pagedlist.mvc 在安装完成之后,会在Content下添加PagedList ...
OSX: 10.9的SMB网络共享连接可能破坏其权限设置
参见以前的Blog,“OSX: 10.9 Mavericks的重要更新技术细节(1)”,自从10.9之后,它的内核默认地使用全新的SMB2协议,这本来是令人期待的变化,不过根据这多年来和OS X系统的 ...
PHP 数组和对象的相互转化
对象和数组的相互转化在开发中也是很常见,一般不是多维的情况下直接(array)和(object)就可搞定了,多维的话,遍历下也就可以了: 1 <?php 2 class test 3 { 4 p ...
win7下设置 WiFi AP
开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让计算机变成无线路由器.实现共享上网. 1.以管理员身份运行命令提示符: “开始”---在搜索栏输入“cmd”-- ...
Webbrowser中模拟连接点击（非鼠标模拟）
Delphi uses mshtml, ActiveX; //初始加载网易主页 procedure TForm1.FormCreate(Sender: TObject); begin Webbrows ...

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

网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式的更多相关文章

随机推荐

热门专题