html5+css3+php左右滑动效果,HTML5+CSS3从入门到精通之HTML5页面点击和左右滑动页面滚动...

本篇教程探讨了HTML5+CSS3从入门到精通之HTML5页面点击和左右滑动页面滚动，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

HTML>

HTML5测试

$(function() {

var startX, startY, endX, endY;

var showADID = 1;

document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);

document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);

document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);

function touchStart(event) {

var touch = event.touches[0];

startY = touch.pageY;

startX = touch.pageX;

}

function touchMove(event) {

var touch = event.touches[0];

endX = touch.pageX;

}

function touchEnd(event) {

$("#img0" + showADID).hide();

showADID++;

if (showADID > 4) {

showADID = 1;

}

$("#img0" + showADID).show();

$("#spText").html("X轴移动大小：" + (startX - endX));

}

})

        resources/tcode/t1.png"  />

        resources/tcode/t2.png" style="display:none;" />

        resources/tcode/t3.png" style="display:none;" />

        resources/tcode/t4.png" style="display:none;" />

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！