网站图片列表动态显示、根据屏幕宽度动态设置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 ...
随机推荐
- Android 指定纯色图标的颜色
最近项目用到了系统图标,但是设计师设计的颜色却与系统图标不一样: 如果每张图片都要用Photoshop进行颜色填充势必增加了工作量,而且不灵活,占资源: 例如同一张图片,希望点击的时候改变颜色 ...
- hdu 5606 tree（并查集）
Problem Description There is a tree(the tree is a connected graph which contains n points and n−1 ed ...
- lucas模板
ll PowMod(ll a,ll b,ll MOD){ ll ret=; while(b){ ) ret=(ret*a)%MOD; a=(a*a)%MOD; b>>=; } return ...
- sqlplus中隐患组合键
在UNIX/Linux平台中的SQL*Plus命令行提示符下,如果误按了组合键:Ctrl+S,那么这个会话将被锁定,输入任何命令都没有显示出来的. 解锁组合键:Ctrl+Q 注意:在使用ctrl+s锁 ...
- GCC单独编译host/examples/ tx_waveforms.cpp
1.编译 须要链接uhd库和boost_program_options库以及boost_thread库: g++ tx_waveforms.cpp -o a -luhd -lboost_program ...
- C#整理4——循环语句
一.循环语句 定义:可以反复执行某段代码,直到不满足循环条件为止. 循环的四要素:初始条件.循环条件.状态改变.循环体. 1.初始条件:循环最开始的状态. 2.循环条件:在什么条件下进行循环,不满足 ...
- 在CSDN上看到的一个过滤方法，感觉还不错
/// <summary> /// 把字符串中包含的敏感词替换成别的关键字 /// </summary> /// <param name="s"> ...
- Java与C++相异的地方
继承标识:Java使用extends/implement,C++使用: super:调用父类的某些东西 instanceof:RTTI机制(A is instanceif B) final:类似于C+ ...
- ajax中返回包含html的奇葩问题
如果通过ajax返回一串包含有html标签的字符串,然后添加到相应的html文档位置,如果标签外含有空格或者换行等就会报错.
- PHPStrom上传文件报502错误原因
PhpStorm是一个轻量级且便捷的PHP IDE,其自身拥有apache类似的编译器,能够在无Apache的情况下运行,很适合初学PHPStrom的朋友. 但是我发现了一个问题,那就是用PHPStr ...