当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > MPBrowser简易图片浏览器 v1.0

AJAX技术
AJAX初级应用-RSS无刷新聚合器的代码与下载
一个封装的Ajax类
pjblog发表评论用的ajaxJS.js
AJAX和JSP实现的基于WEB的文件上传的进度控制代码
AJAX实现仿Google Suggest效果
Baidu Musicbox 用到的ajax代码
[asp]天枫AJAX百度音乐即时听附下载
[asp]天枫AJAX blog V1.0 程序提供下载了
ajax+asp无限级分类树型结构的代码
asp+ajax实现静态页面分页的代码
用ajax实现在单击事件下加载一个DIV层的脚本
AJAX javascript的跨域访问执行
javascript 拖动_cookie_ajax等
Ajax象棋演示和并提供代码下载
仿google搜索提示 SuggestFramework的使用
利用AJAX开源项目 在网页里播放视频实现方法
ajax 服务器文本框自动填值
ajax 数据库中随机读取5条数据动态在页面中刷新
asp.net 全部选中与取消操作,选中后的删除(ajax)实现无刷新效果
javascript Ajax 类实现代码

AJAX技术 中的 MPBrowser简易图片浏览器 v1.0


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 43 ::
收藏到网摘: n/a

MPBrowser.js
复制代码 代码如下:

var thisImgNo = 290;
function ajaxConn(){
var xmlhttp = false;
try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch(e){try{xmlhttp = new XMLHttpRequest();}
catch(e){alert(e);xmlhttp = false;}}}
if(!xmlhttp)return null;
this.connect = function(Url,Method,postContent){
if(!xmlhttp)return false;
Method = Method.toUpperCase();
try{
if (Method == "GET"){
xmlhttp.open(Method,Url + '?' + postContent,true);
xmlhttp.setRequestHeader("Content-Type","text/html;charset=GB2312");
sVars = null;
}else{
xmlhttp.open(Method,Url,true);
xmlhttp.setRequestHeader("Method","POST "+Url+" HTTP/1.1");
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
imgInfo = xmlhttp.ResponseText;
var imgInfoArr = imgInfo.split("|");
var tmpimg = new Image();
tmpimg.src = imgInfoArr[0];
thisImgNo = imgInfoArr[1];
var element = document.getElementById("img");
if(!element.xpos)element.xpos = 0;
element.style.width = (element.clientWidth + 130) + "px";
slideElement("img",element.xpos-130,0,10);
element.innerHTML += '<a href="http://blog.mzoe.com/" target="_blank"><img height="90" width="120" alt="" src="'+imgInfoArr[0]+'" /></a>';
}
}
}
xmlhttp.send(postContent);
}catch(z){return false;}
return true;
}
return this;
}
function loadImg(type){
var element = document.getElementById("img");
if(!element.xpos)element.xpos = 0;
if(type=="pre"){
if(element.xpos==0)return false;
slideElement("img",element.xpos+130,0,10);
}else{
if(element.xpos==-(element.clientWidth - 260)){
var myConn = new ajaxConn();
if(!myConn)return false;
myConn.connect("Cmd.asp","get","d="+thisImgNo);
}else{
slideElement("img",element.xpos-130,0,10);
}
}
}
function slideElement(elementId,x,y,inc){
var element = document.getElementById(elementId);
if(element.sliding)clearTimeout(element.sliding);
if(!element.xpos)element.xpos = 0;
if(!element.ypos)element.ypos = 0;
if(element.xpos == x && element.ypos == y) return true;
if(element.xpos > x){
var dist = Math.ceil((element.xpos-x)/inc);
element.xpos = element.xpos - dist;
}
if(element.xpos < x) {
var dist = Math.ceil((x-element.xpos)/inc);
element.xpos = element.xpos + dist;
}
if(element.ypos > y) {
var dist = Math.ceil((element.ypos-y)/inc);
element.ypos = element.ypos - dist;
}
if(element.ypos < y) {
var dist = Math.ceil((y-element.ypos)/inc);
element.ypos = element.ypos + dist;
}
element.style.left = element.xpos+'px';
element.style.top = element.ypos+'px';
element.sliding = setTimeout('slideElement("'+elementId+'",'+x+','+y+','+inc+')',10);
}

MPBrowser主要的特点是无刷新,简单易用,代码也相当的简单,只有几kb的js代码,可以与任何的后台轻易整合,最后不臭美的说还有点好看(当然换个样式也相当的方便)。
  演示地址:http://www.mzoe.com/demo/MPBrowser/
  下载地址:http://www.mzoe.com/downfile/MPBrowser_v1.rar
  喜欢的朋友顶一下:D。