MPBrowser简易图片浏览器 v1.0

renqiurenbaby

renqiurenbaby

2016-02-19 13:00

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的MPBrowser简易图片浏览器 v1.0,手机电脑控们准备好了吗?一起看过来吧!
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。
展开更多 50%)
分享

猜你喜欢

MPBrowser简易图片浏览器 v1.0

Web开发
MPBrowser简易图片浏览器 v1.0

发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载

Web开发
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

《仙镜Online v1.0》(Android版本)来袭!

手机游戏
《仙镜Online v1.0》(Android版本)来袭!

AJAX聊天室V1.0发布

Web开发
AJAX聊天室V1.0发布

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ORACLE之常用FAQ V1.0一(构架体系)

编程语言 网络编程
ORACLE之常用FAQ V1.0一(构架体系)

ORACLE之常用FAQ V1.0二(构架体系)

编程语言 网络编程
ORACLE之常用FAQ V1.0二(构架体系)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

ajax实现标签导航

ajax实现标签导航

ajax发表 读取 评论

ajax发表 读取 评论
下拉加载更多内容 ↓