网站图片列表动态显示、根据屏幕宽度动态设置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 ...
随机推荐
- 【HDU 5572 An Easy Physics Problem】计算几何基础
2015上海区域赛现场赛第5题. 题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5572 题意:在平面上,已知圆(O, R),点B.A(均在圆外),向量 ...
- linux监控脚本,脚本支持传参,整合C程序
1,查看指定用户下的进程pid
- ls命令 ls -trl
每天一个linux命令(1):ls命令 ls命令是linux下最常用的命令.ls命令就是list的缩写缺省下ls用来打印出当前目录的清单如果ls指定其他目录那么就会显示指定目录里的文件及文件 ...
- SQL Server AlwaysOn 故障转移
目的: a) AlwaysOn 可用性组功能是一个提供替代数据库镜像的企业级方案的高可用性和灾难恢复解决方案. b) 当数据库服务器SQL1出现故障宕机时,可以通过AlwaysOn可用性组,自动故障转 ...
- 看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- Python的基础--对象
对象(Objects)是python中数据的抽象,python中所有的数据均可以用对象或者是对象之间的关系来表示.每个对象均有标识符(identity).类型(type).值(value). 标识符. ...
- jsp中包含JAVA代码
在JSP中大部分都是由脚本小程序组成,所谓的脚本小程序就是里面直接包含了JAVA代码. 在JSP中Scriptlet一共分为三种: · <%%>:定义局部变量,编写语句 ...
- Sublime text3 安装和配置
1.下载安装 首先到http://www.sublimetext.com/3根据你的电脑配置下载对应的安装包,然后不断的点击next,然后blablabla......就可以安装好了.本文是安装por ...
- Python之路第五天，基础(5)-序列化和字符串格式化
序列化 Python中用于序列化的两个模块 json 用于『字符串』和『python基本数据类型』间进行转换 pickle 用于『python特有的类型』和『python基本数据类型』间进行转换 js ...
- [solaris]odbc-oracle,简单测试
#include <string> #include <iostream> #include <stdio.h> #include <sql.h> #i ...