MPBrowser简易图片浏览器 v1.0

所属分类: 网络编程 / AJAX相关 阅读数: 1019
收藏 0 赞 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。
更多精彩内容其他人还在看

ajax中文乱码问题解决方案

ajax中文乱码问题在中文中经常会出现这种问题,其实只要稍加注意就不会出现ajax中文乱码这回事情了,接下来为大家详细介绍下如何解决这类问题
收藏 0 赞 0 分享

jquery ajax实现批量删除具体思路及代码

回调函数,在请求完成后需要进行的操作:此处是把选中的checkbox去掉,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈,希望对你有所帮助
收藏 0 赞 0 分享

JQuery+ajax实现批量上传图片(自写)

jquery+ajax方式实现单张图片上传的代码是可以搜的到,实现批量上传图片的程序却没搜索到于是自己写了个,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

利用Ajax实现在脚本里传值实例介绍

Ajax实现在脚本里传值可以解决实际上的一些问题,本文实现了一下,感兴趣的朋友可以参考下,希望可以帮助到你
收藏 0 赞 0 分享

jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板,接下来为大家介绍下让那些死板的数据 更具有可读性、可用性
收藏 0 赞 0 分享

jQery ajax——load()方法示例介绍

load(url,[data],[callback])url:加载的页面地址;data: 可选项,发送到服务器的数据,格式是key/value;callback:可选项,回调函数,示例代码如下
收藏 0 赞 0 分享

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用特在此与大家一起分享,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

ajax 登录功能简单实现(未连接数据库)

未连接数据库下实现ajax 登录功能判断登陆成功与失败,喜欢ajax的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

AJAX和WebService实现邮箱验证(无刷新验证邮件地址是否合法)

首先在项目里面添加服务引用,验证 Email 地址是否正确(邮件地址合法、只是域名正确、邮件服务器没有找到等等)感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

AJAX和三层架构实现分页功能具体思路及代码

本文涉及到AJAX和三层架构方面的知识,在学习分页的同时也巩固了一下它们的相关知识,适合初学者的你
收藏 0 赞 0 分享
查看更多