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。

try

相关推荐