MPBrowser简易图片浏览器 v1.0 - 网站

MPBrowser简易图片浏览器 v1.0

分类:js_jQuery答疑 - 常见问题 · 发布时间:2021-11-08 23:19 · 阅读:4771

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 += '';
                    }
                }
            }
            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。
标签:
MPBrowser简易图片浏览器 v1.0

相关文章

AJAX乱码与异步同步以及封装jQuery库实现步骤详解

这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

AJAX的跨域问题解决方案

跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源,下面这篇文章主要给大家介绍了关于AJAX的跨域问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

利用Ajax实现智能回答的机器人示例代码

这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

ajax、axios和fetch之间优缺点重点对比总结

今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下

如何通过axios发起Ajax请求(最新推荐)

Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求,这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下

返回分类 返回首页