网站图片列表动态显示、根据屏幕宽度动态设置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 ...
随机推荐
- ngrok首页、文档和下载 - Web服务安全通道 - 开源中国社区
ngrok首页.文档和下载 - Web服务安全通道 - 开源中国社区 Web服务安全通道 ngrok 编辑/纠错 分享到 新浪微博腾讯微博 已用 +0 收藏 ...
- 1、什么是Lucene，Lucene能干什么
1.什么是lucene Lucene是一个全文搜索框架,而不是应用产品.因此它并不像http://www.baidu.com/ 或者google Desktop那么拿来就能用,它只是提供了一种工具让 ...
- BZOJ 3674 可持久化并查集加强版 可持久化并查集
题目大意:同3673 强制在线 同3673 仅仅只是慢了一些0.0 这道题仅仅写路径压缩比仅仅写启示式合并要快一点点 两个都写就慢的要死0.0 改代码RE的可能是内存不够 #include<cs ...
- Do we need other languages other than C and C++?
There were hundreds of or thousands of programming languages created since the invention of computer ...
- 关于Console的Main(String[] args)参数输入
之前接触一个往Console里输入参数的项目,资深QA教我怎么run,灰常脸红. 今日无事,baidu之. Step1 写简单Console Code. class Program { static ...
- 为什么Underscore
Underscore是什么? Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象.它是这个问题的答案:“如果我在一个空白 ...
- 代码生成引擎之T4模版
在学校三年.公司里呆了快一年了,作用ASP.NET开发的我,居然从来没听过T4模版,公司里也没有人使用,它就是这样不为世人所熟知,却又默默的奉献着!这...........tm还是我吗?什么时候会说这 ...
- 关于Get和Post的学习笔记(五)
一 .Get和Post的优缺点 1. Get> 优点: 编写起来比较简单,只要在地址后面拼接数据即可. > 缺点: 提交的数据有长度限制.安全性比较差 2.Post > 优点: 提交 ...
- c++ ：OOP之静态类型与动态类型
所谓静态类型即类型指针或引用的字面类型:而动态类型即类型指针或引用的实际类型. 这一对概念一般发生在基类和派生类之间. 如: class Base { ..... } class Derived : ...
- Kurskal算法（克鲁斯卡尔算法）
特点:适用于稀疏图,边比较少的图.如果顶点较少,且为稠密图,则用Prim算法.跟Prim算法的用途相同.时间复杂度为O(e*loge),其中e为边数. 代码: #include <stdio.h ...