网站图片列表动态显示、根据屏幕宽度动态设置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 ...

随机推荐

当浏览器不支持placeholder，所执行的函数
$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...
OC基础4：类和方法
"OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.类的声明(@interface)要放在 ...
linux使用FIO测试磁盘的iops
FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, libaio, posixaio, SG v3, splice, null, ...
base64图片在各种浏览器的兼容性处理
IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge.base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE ...
数据库基础（变量、运算符、if语句、while语句）
数据库基础(变量.运算符.if语句.while语句) 变量: 定义变量:declare @变量名数据类型变量赋值:set @变量名 = 值输出:print 变量或字符串 SQL语言也跟其他编 ...
maven简单工具命令
(一)聚合项目的创建//创建父项目mvn archetype:create -DgroupId=com.ztesoft.resmaster -DartifactId=lifecycle<pack ...
iOS 类管理
CocoaPods安装和使用教程 Code4App 原创文章.转载请注明出处:http://code4app.com/article/cocoapods-install-usage 目录 CocoaP ...
实现mysql的分组排名问题
如下图所示的表结构,mysql中查出按照相同class的成员按照年龄排序. sql语句实现如下: SELECT id,name,age,rank FROM ( ,) AS rank,@pa:=ff.c ...
树莓派设置成无线路由（AP）
1.安装需要的包 sudo apt-get install hostpad uhdcpd 2.配置/etc/network/interfaces文件配置wlan0为静态地址格式如下: iface ...
05-3. 求a的连续和(15)
输入两个整数a和n,a的范围是[0,9],n的范围是[1,8],求数列之和S = a+aa+aaa+...+aaa...a(n个a). 如a为2.n为8时输出的是2+22+222+...+222222 ...

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

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

随机推荐

热门专题