woaidongmao

文章均收录自他人博客，但不喜标题前加-[转贴]，因其丑陋，见谅！~

随笔 - 1469, 文章 - 0, 评论 - 661, 引用 - 0

数据加载中……

html读取xml静态翻页实例

<!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=gb2312" />
<title>Ajax图片列表实例</title>
<meta name="Keywords" content="," />
<meta name="Description" content="aaaaaaaaaaaaaaaaaaaaaa" />
<style type="text/css">
<!--
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img {margin: 0;padding: 0;border: 0;font-family:"宋体";}
select,input{vertical-align:middle;font-size:12px;}
textarea{font-size:12px;}
body {background: #FFF;color:#000; font-size:12px; text-align:center;margin:5px 0;}
ul,li{list-style:none;}
ul,p,ol{line-height:20px;}
img{border:0;}

#wrap{width:750px;margin:0 auto;background:#FFF;text-align:left;}
/* main */
.MainCont{border:1px solid #b7b7b7;background:#fbfbfb;}

.TopInfo{height:33px;padding-top:2px;line-height:33px;background:#fff;border-bottom:1px solid #f1f1f1;}
.TopInfo .Info{float:left;padding-left:20px;}
.TopInfo .Info strong{color:#c00;}
.TopInfo .PageList{float:right;color:#666;padding-right:16px;}

.BotInfo{height:33px;padding-top:2px;line-height:33px;background:#fff;border-top:1px solid #f1f1f1;}
.BotInfo .Info{float:left;padding-left:20px;line-height:14px;padding-top:11px;}
.BotInfo .Info a:link,.BotInfo .Info a:visited{color:#333;text-decoration:none;}
.BotInfo .Info a:hover{color:#f00;text-decoration:underline;}
.BotInfo .Info img{vertical-align:middle;margin-right:3px;}
.BotInfo .PageList{float:right;color:#666;padding-right:16px;}
.PageList strong{color:#c00;}
.PageList a:link,.PageList a:visited{color:#0b0164;}
.PageList a:hover{color:#f00;}

.Content{width:732px;margin:0 auto;}
.Content .Line_1{clear:both;display:inline-block;}
.Content .Line_2{clear:both;background:#f0f0f0;display:inline-block;}
.Content .box{width:183px;float:left;padding:16px 0 14px;overflow:hidden;}
.Content .box table td{width:183px;height:152px;text-align:center;}
.Content .box table td img{border:1px solid #000;}
.Content .box p{width:160px;margin:0 auto;text-align:center;padding-left:12px;line-height:14px;padding-top:10px;}
-->
</style>
</head>
<body>
<div id="wrap">

<div class="MainCont">

<div class="TopInfo">
    <div class="Info" id="TopInfo">数据读取中...</div>
    <div class="PageList" id="TopPageList">
     <<首页上页   <strong>1</strong>   下页末页>>
    </div>
</div>

<div class="Content" id="Content">
<div style="padding:100px 0;text-align:center;">数据读取中...</div>
</div>

<div class="BotInfo">
    <div class="Info"><a href="#">返回页顶</a></div>
    <div class="PageList" id="BotPageList">
     <<首页上页   <strong>1</strong>   下页末页>>
    </div>
</div>

</div>

</div>
<script language="javascript" type="text/javascript">
<![CDATA[//><!--
// mengjia 070313
var ImmediateData = new Array();//数据
var PageSize = 20; //每页个数
var Page = 1; //当前页码

getData("http://news.sina.com.cn/news/z/qglh2008/pic/0313.xml",analyzeData); //读取数据 getData(url,处理方法)

function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}

//XML 数据读取部分
var XmlHttp;
function getData(url,funcName) {
if (window.XMLHttpRequest) {
    XmlHttp = new XMLHttpRequest()
     if (XmlHttp.overrideMimeType) {
              XmlHttp.overrideMimeType('text/xml');
           }
    } else if (window.ActiveXObject) {
    XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XmlHttp.onreadystatechange = funcName;
XmlHttp.open("GET", url, true);
XmlHttp.send(null);
}
function analyzeData() { //数据xml处理程序
    if (XmlHttp.readyState == 4) {
     if (XmlHttp.status == 200) {
     var xmldoc = XmlHttp.responseXML;
     var datas=xmldoc.getElementsByTagName('data');
     ImmediateData = new Array;
     for(var iData = 0; iData < datas.length; iData++) {
      ImmediateData.push(new Array(datas[iData].getAttribute("img"),datas[iData].getAttribute("title"),datas[iData].getAttribute("url")));
     }
     OutHtml();
    }else{
     alert('数据读取出错:\n\n' + XmlHttp.statusText + '');
     OutoError();
    }
}
}

function GotoPage(num){ //跳转页
Page = num;
OutHtml();
}

function OutoError(){ //显示失败状态
GetObj("TopInfo").innerHTML = '读取失败';
GetObj("Content").innerHTML = '<div style="padding:100px 0;text-align:center;">读取失败</div>';
}

function OutHtml(){ //输出HTML
if(ImmediateData.length == 0){OutoError();return;}
var Pages = Math.floor((ImmediateData.length - 1) / PageSize) + 1;
if(Page < 1)Page = 1;
if(Page > Pages)Page = Pages;
var Temp = "";
var BeginNO = (Page - 1) * PageSize + 1; //开始编号
var EndNO = Page * PageSize; //结束编号
if(EndNO > ImmediateData.length) EndNO = ImmediateData.length;
if(EndNO == 0) BeginNO = 0;

if(!(Page <= Pages)) Page = Pages;
GetObj("TopInfo").innerHTML = "共有<strong>" + ImmediateData.length + "</strong>张图片  当前显示第" + BeginNO + "-" + EndNO + "篇";

//分页
if(Page != 1){Temp = '<a href="javascript:void(0)" onclick="GotoPage(1)"><<首页</a> <a href="javascript:void(0)" onclick="GotoPage(' + (Page - 1) + ')">上页</a> '}else{Temp = '<<首页上页 '};

//完美的翻页列表：）
var PageFrontSum = 5; //当页前显示个数
var PageBackSum = 5; //当页后显示个数

var PageFront = PageFrontSum - (Page - 1);
var PageBack = PageBackSum - (Pages - Page);
if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront; //前少后多，前剩余空位给后
if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; //后少前多，后剩余空位给前
var PageFrontBegin = Page - PageFrontSum;
if(PageFrontBegin < 1)PageFrontBegin = 1;
var PageFrontEnd = Page + PageBackSum;
if(PageFrontEnd > Pages)PageFrontEnd = Pages;

if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>';
for(var i = PageFrontBegin;i < Page;i ++){
Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + i + ')">' + i + '</a>';
}
Temp += ' <strong>' + Page + '</strong>';
for(var i = Page + 1;i <= PageFrontEnd;i ++){
Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + i + ')">' + i + '</a>';
}
if(PageFrontEnd != Pages) Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + (Page + 10) + ')" title="后10页">..</a>';

if(Page != Pages){Temp += '  <a href="javascript:void(0)" onclick="GotoPage(' + (Page + 1) + ')">下页</a> <a href="javascript:void(0)" onclick="GotoPage(' + Pages + ')">末页>></a>'}else{Temp += '  下页末页>>'}

GetObj("BotPageList").innerHTML = Temp;
GetObj("TopPageList").innerHTML = Temp;

//图片数据
var line = 1;
var sum = 0;

if(EndNO == 0){
    GetObj("Content").innerHTML = '<div style="padding:100px 0;text-align:center;">暂无图片</div>';
    return;
}
Temp = '<div class="Line_' + line + '">\n';
for(var i = BeginNO - 1;i < EndNO;i ++){
    if(sum % 4 == 0 && sum != 0){
     line++;
     line = line == 3?1:line;
     Temp += '<div class="clearit"></div>\n</div>\n<div class="Line_' + line + '">\n';
    }
    Temp += '<div class="box">\n';
    Temp += '<table cellspacing="0"><tr><td><a href="' + ImmediateData[i][2] + '" target="_blank"><img src="' + ImmediateData[i][0] + '" alt="' + ImmediateData[i][1] + '" /></a></td></tr></table>\n';
    Temp += ' <p><a href="' + ImmediateData[i][2] + '" target="_blank">' + ImmediateData[i][1] + '</a></p>\n'
    Temp += '</div>\n'
    sum ++;
}
Temp += '<div class="clearit"></div>\n</div>\n';

GetObj("Content").innerHTML = Temp;
if(navigator.appName == 'Microsoft Internet Explorer')setTimeout('ChrImg()',500);
}

function ChrImg(){ //解决IE下图片渲染问题
var ImageArray = GetObj("Content").getElementsByTagName("img");
for(var i = 0;i < ImageArray.length;i++){
if(!ImageArray[i].complete) ImageArray[i].src = ImageArray[i].src;
}
}

//--><!]]>
</script>
</body>
</html>

效果

posted on 2009-07-27 14:15 肥仔阅读(1354) 评论(0) 编辑收藏引用所属分类: Web-前台

只有注册用户登录后才能发表评论。
【推荐】100%开源！大型工业跨平台软件C++源码提供，建模，组态！

相关文章: HTML的<base href = “” /> 分离到底！用XML+XSLT+CSS+JQuery+WebService组建Asp.Net网站 Home Page和Landing Page 理解Web框架，和如何构建一个CSS框架 favicon.ico jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera 怎样在 Windows 环境下调试 JScript 脚本基于RIA Flex Flash 平台开发的进销存系统开发经验 JavaScript 使用面向对象的技术创建高级 Web 应用程序 JSON剖析：优点和不足

网站导航: 博客园 IT新闻 BlogJava 知识库博问管理

woaidongmao

html读取xml静态翻页实例

导航

常用链接

留言簿(10)

随笔分类

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜