网站图片列表动态显示、根据屏幕宽度动态设置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 ...
随机推荐
- 使用virtualenv隔离python环境
使用virtualenv隔离python环境 | 爱积累爱分享 使用virtualenv隔离python环境 iitshare 分类:Python | 标签:pythonenv, virtualenv ...
- CSS 定位 (Positioning)学习
最近被css的定位要搞疯了...下面我总结一下最近学习东西. 先介绍几个概念: 块框:div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”. 行内框:与之相反,sp ...
- hdu 1181 变形课（dfs）
Problem Description 呃......变形课上Harry碰到了一点小麻烦,因为他并不像Hermione那样能够记住所有的咒语而随意的将一个棒球变成刺猬什么的,但是他发现了变形咒语的一个 ...
- 新闻公布系统 (Asp.net 三层架构 )
2012年度课程设计---新闻公布系统(小结) ...
- Matlab自己定义函数
Matlab提供了强大的函数库供用户调用,但也支持用户自定义函数.本文使用了范德堡大学教授Akos Ledeczi授课中的样例来一步步说明怎样在Matlab中自定义函数. 首先,在command wi ...
- ORACLE 主要后台进程1
Oracle Database Background Processes: 1.Database writer (DBWn)The database writer writes modified bl ...
- 【转载】【转自AekdyCoin的组合数取模】
本篇文章主要介绍了"[组合数求模] 转自AekdyCoin",主要涉及到[组合数求模] 转自AekdyCoin方面的内容,对于[组合数求模] 转自AekdyCoin感兴趣的同学可以 ...
- 【C++学习笔记1】
几个比较容易忘记的东西....... 移动构造函数: Vector(Vector &©) //移动构造函数 { if(copy.A!=NULL) { A=copy.A; cop ...
- CSS备忘-1
CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 <head> 区域使用<sty ...
- document load 与document ready的区别
页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数 问题:如果图片资源较多,加载时间较长,onload后等待执行的函 ...