求点击图片放大 然后滑动翻图片
能给我下解决方法吗 我qq:361058057 谢谢
已经找到解决方案了，但是还是非常感谢。
(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>