jqmobi框架求图片展示插件

Question

求点击图片放大 然后滑动翻图片

Answer 1

(function($) {
var startX=0, startY, dx=0, dy;
var showADID = 0;
var _gt_touchXObj=null,_gt_touchXMoveMax=null,_gt_touchXMoveTime=null,_gt_touchXSCallback=null;
/**
 * 设置拖动相关属性，并且设置tXObj具体值后，拖动效果生成。参数为空则不重置
 * tXObj 需要拖动的区域，里面存放img列表
 * tXSCallback 拖动完成后触发的回调函数，参数为当前ID
 * tXADID 从第几张开始
 * moveMax 移动多少距离后，当做为拖动事件
 * moveTime 图片动画效果的延时时间
 */
$.fn.setTouchXObj = function (tXObj,tXSCallback,tXADID,moveMax,moveTime) {
    if(tXObj){
        if(_gt_touchXObj){//解除旧的绑定
            _gt_touchXObj.unbind("touchstart", _gt_touchstartFun);
            _gt_touchXObj.unbind("touchmove", _gt_touchmoveFun);
            _gt_touchXObj.unbind("touchend", _gt_touchendFun);
        }
        _gt_touchXObj = tXObj;
        //生成新的绑定
        _gt_touchXObj.bind("touchstart", _gt_touchstartFun);
        _gt_touchXObj.bind("touchmove", _gt_touchmoveFun);
        _gt_touchXObj.bind("touchend", _gt_touchendFun);

    }
    if(tXADID){
        showADID = tXADID;
    }
    if(moveMax){
        _gt_touchXMoveMax = moveMax;
    }
    if(moveTime){
        _gt_touchXMoveTime = moveTime;
    }
    if(tXSCallback){
        _gt_touchXSCallback = tXSCallback;
    }
};
/**
 * 全部清空
 */
$.fn.initTouchXObj = function () {
    _gt_touchXObj = null;
    showADID = 0;
    _gt_touchXMoveMax = null;
    _gt_touchXMoveTime = null;
    _gt_touchXSCallback = null;
};

$(document).ready(function() {
    if ($.os.ie) return; //ie exit
    window.addEventListener("resize", function(e) {

    });
});
/**
 * 获取可以操作动画效果的图片
 */
function getTouchXImgFun(showADID){
    return $(_gt_touchXObj.find("img").get(showADID));
}
window.getTouchXImgFun = getTouchXImgFun;
/**
 * 获取可以操作动画效果的图片
 */
function getHideXImgFun(sa1,sa2){
    var allimg = _gt_touchXObj.find("img");
    for(var i=0;i<allimg.length;i++){
        if(i!=sa1 && i!=sa2){
            allimg.hide();
        }
    }
}
/**
 * 获取可以操作动画效果的图片总个数
 */
function getCountXImgFun(){
    return _gt_touchXObj.find("img").length-1;
}
window.getCountXImgFun = getCountXImgFun;
/**
 * 拖动开始事件
 */
function _gt_touchstartFun(e) {
    if(_gt_touchXObj){
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
    }
}
/**
 * 拖动中事件
 */
function _gt_touchmoveFun(e) {
    if(_gt_touchXObj){
        dx = e.touches[0].pageX;
        dy = e.touches[0].pageY;
    }
}
/**
 * 放开手事件
 */
function _gt_touchendFun(e) {
    if(_gt_touchXObj){
        moveMax = _gt_touchXMoveMax;
        moveTime = _gt_touchXMoveTime;
        tXCallback = _gt_touchXSCallback;
        if(moveTime){}else{
            moveTime = 200;
        }
        if(moveMax){}else{
            moveMax = 100;
        }

        var showx = (startX-dx);
        if(showx>moveMax || showx<(-moveMax)){
            var issta = null;
            var opleft = true;
            if(showx>moveMax){//开始大于结束，向左
                opleft = true;
                issta = "-100%";
            }else{////开始小于结束，向右
                opleft = false;
                issta = "100%";
            }
            var nowShowADID = showADID;
            //与按钮滑动冲突，先隐藏所有图片
            _gt_touchXObj.find("img").hide();
            getTouchXImgFun(nowShowADID).css3Animate({
                x: issta,
                time: moveTime+"ms",
                callback: function () {
                    getTouchXImgFun(nowShowADID).hide();
                }
            });
            window.setTimeout(function(){
                if(opleft){
                    showADID++;
                    issta = "100%";
                }else{
                    showADID--;
                    issta = "-100%";
                }
                var showADIDMax = getCountXImgFun();
                if (showADID > showADIDMax) {
                    showADID = 0;
                }else if(showADID<0){
                    showADID = showADIDMax;
                }

// getHideXImgFun(nowShowADID,showADID);
getTouchXImgFun(showADID).show();
getTouchXImgFun(showADID).css3Animate({
x: issta,
callback: function () {
getTouchXImgFun(showADID).css3Animate({
x: "0%",
time: (moveTime+100)+"ms",
callback: function () {
getTouchXImgFun(nowShowADID).hide();
if(tXCallback){//调用函数，并且把当前坐标传给他
tXCallback(showADID,showx);
}
}
});
}
});
}, 100);
}
}
}
})(af);
html:
<body>

      </div>
      <div id="content">
        <div title='Welcome Emapp' id="main" class="panel" selected="true" data-load="loadedPanel" data-unload="unloadedPanel" data-header="homeheader" >
            <a class="button" onclick="dhxgfun()">动画效果</a>
            <a class="button" onclick="startHDFun()">开始滑动</a>
            <a class="button" onclick="endHDFun()">结束滑动</a>
            <form id="formGTouchLayer1">
                <span id="spText">X轴移动大小：0   当前所处张数：0</span><br/>
                <div style="border:solid 1px Red;width: 100%;overflow:hidden;" id="divADBox">
                    <img id="img00" src="http://image.zhangxinxu.com/image/study/p/s500/ps1.jpg" width="100%" style="position:absolute;"/>
                    <img id="img01" src="http://image.zhangxinxu.com/image/study/p/s500/ps2.jpg" width="100%"  style="display: none;position:absolute;"/>
                    <img id="img02" src="http://image.zhangxinxu.com/image/study/p/s500/ps3.jpg" width="100%"  style="display: none;position:absolute;"/>
                    <img id="img03" src="http://image.zhangxinxu.com/image/study/p/s500/ps4.jpg" width="100%"  style="display: none;position:absolute;"/>
                </div>
            </form>

        </div>
      </div>
      <header id="homeheader">
          <h1>Welcome Emapp</h1>
      </header>
    </div>
    <script type="text/javascript">
        (function($){
            var issta = "0%";
            function dhxgfun(){
                if(issta=='0%'){
                    issta = "100%";
                }else{
                    issta = "0%";
                }
                $("#img01").css3Animate({
                    x: issta,
                    time: "100ms",
                    callback: function () {

// alert('执行完成');
}
});
}
window.dhxgfun = dhxgfun;
/**
*开始滑动事件，一般作用于图片载入完成或者loadedPanel
/
function startHDFun(){
//$("#spText").html("X轴移动大小：" + showx +" 当前所处张数："+showADID);
$("#afui").setTouchXObj($("#divADBox"),function(showADID,showx){
$("#spText").html("X轴移动大小：" + showx +" 当前所处张数："+showADID);
});
}
window.startHDFun = startHDFun;
/
*停止滑动事件，一般作用于unloadedPanel
**/
function endHDFun(){
$("#afui").initTouchXObj();
}
window.endHDFun = endHDFun;

            $(document).ready(function(){

            });
        })(jq);
    </SCRIPT>

</body>

Answer 2

已经找到解决方案了，但是还是非常感谢。

Answer 3

能给我下解决方法吗 我qq:361058057 谢谢