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

随机推荐

Linux开发环境配置
配置JDK: tar -xzvf jdk-7u71-linux-x64.tar.gz rm -f jdk-7u71-linux-x64.tar.gz 测试:java -version 配置Grad ...
Cocos2d-x--Box2D绘制出两个矩形框的解决方案
一个简单的Demo,只是在程序窗口绘制出一个矩形找到以下代码,注释掉其中一句效果:
Duanxx的STM32学习：STM32下载方式选择
前几天熟悉了STM32的启动方式.主要由Boot0和Boot1设置如今须要解决的就是STM32的下载的问题. 一開始的时候,我选择的是SWD下载.这样的下载方式须要Boot0=0.Boot1=0.占 ...
3-07. 求前缀表达式的值（25） (ZJU_PAT数学)
题目链接:http://pat.zju.edu.cn/contests/ds/3-07 算术表达式有前缀表示法.中缀表示法和后缀表示法等形式.前缀表达式指二元运算符位于两个运算数之前,比如2+3*(7 ...
GitHub以及Git学习持续编辑学习中
官网地址: http://www.worldhello.net/gotgithub/01-explore-github/030-explore-github.html 1 加入github, http ...
Sequence one(hdu2610dfs+去重)
题目:有一个数列N,和一个数字k,输出该数列的前k个子序列,如果k大于N的所有子序列,输出所有符合要求的序列,序列要求不能是递减序列比如: 3 5 1 3 2 的前五个序列为 1 3 2 1 3 1 ...
C#委托 Lamda表达式
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
Sublime 学习记录（三） Emmet 插件
i. 安装 : 打开命令面板输入pci 回车然后输入emmet 回车即可 ii.用处 : 快速编写html和css代码(快捷键:tab建) iii.html用法: 1) 初始化,html ...
RadioButton、CheckBox与ToggleButton
1.RadioButton RadioButton被称作为单选框,通常都是以组的形式出现,可以在一组控件中选择一个. RadioButton的使用首先需要加入<RadioGroup/>,在 ...
android欢迎页源码
直接上源码: import android.app.Activity; import android.content.Intent; import android.os.Bundle; import ...

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

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

随机推荐

热门专题