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

随机推荐

poj1581
A Contesting Decision Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2519 Accepted: ...
centos Ddos防范开源软件使用及apache ab压测测试
1,检索特定字符的相同行,用于过滤点一些命令行的头说明
x/nfu－用gdb查看内存
用gdb查看内存 2007-12-08 12:43 用gdb查看内存格式: x /nfu <addr> 说明x 是 examine 的缩写 n表示要显示的内存单元的个数 f表示显示方式, ...
RTNETLINK answers: Operation not permitted
如果出现:RTNETLINK answers: Operation not permitted,那是因为没有权限. 解决办法:su,输入root密码.
js中使用队列发送ajax请求
最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...
数据结构 B树、B-树、B+树、B*概念
B树即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
Map笔记总结
Map :存储的是键值对,一对一对出现的,要保证键的唯一性. Map常见的三个子类.1.HashTable 底层是哈希表结构,不能存在null的情况.该集合是线程同步的.效率低此类实现一个哈希表,该哈 ...
table中超长字符串省略号表示两种方法
写在前面: 1.第一种从网上找到的解决方式添加table-layout:fixed 2.第二种添加div 3.字符串过长产生省略号的css语句为如下三种合用:overflow:hidden ...
css3实现图片遮罩效果鼠标hover以后出现文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
MySQL常用的指令
MySQL指令在网上百度出来的是一大堆,在此只是整理平时用的比较多的指令. 百度文库中的这篇文章可以参考http://wenku.baidu.com/view/b5e83a27ccbff121dd36 ...

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

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

随机推荐

热门专题