我正在实现一个滑动效果，但是通过计算x，y坐标移动上部div的位置，然后移动包装器（最上面的div）和屏幕宽度，所以它看起来像滑动效果。
现在我的问题是我不知道在屏幕上显示的下一个div中哪个，我需要操作它，是否有任何方法可以获得当前在ID上显示的div ID。
以下是我的JS代码
(function() {
var swipey = {
slideContainer: null, //<ul> element object that holds the image slides
wrapper: null, //meant for masking/clipping
slides: null, //array of all slides i.e <li> elements
distanceX: 0, //distance moved in X direction i.e left or right
startX: 0, //registers the initial touch co-ordinate
preferredWidth: 0, //dynamic variable to set width
preferredHeight: 0, //dynamic variable to set height
direction: "", //direction of movement
timer: null, //timer that set starts when touch starts
timerCounter: 0, //counter variable for timer
hasSwipeStarted: false, //boolen to chk whether touch has started
maxDistance: 0, //maximum distance in X direction that slide container can move
currentDistance: 0, //current distance moved by slide container through translate
//detect touch and then automatically assign events
isTouchSupported: 'ontouchstart' in window.document,
initSwipey: function() {
// alert('in initSwipey');
//scroll the window up to hide the address bar of the browser.
window.setTimeout(function() {
window.scrollTo(0, 1);
}, 100);
/*mapping touch events to mouse events. Automatic registration of event
based on the device. If touch enabled then touch event is registered.
and if desktop browser then mouse event is registered.*/
swipey.startEvent = swipey.isTouchSupported ? 'touchstart' : 'mousedown',
swipey.moveEvent = swipey.isTouchSupported ? 'touchmove' : 'mousemove',
swipey.endEvent = swipey.isTouchSupported ? 'touchend' : 'mouseup',
//get all the instances of the HTML elements
swipey.wrapper = document.getElementById("wrapper");
swipey.slideContainer = document.getElementById("sitePageContainer");
//swipey.slides = slideContainer.getElementsByTagName("li");
swipey.slides = document.getElementsByClassName("sitePage");
//for iPhone, the width and height
swipey.preferredWidth = window.innerWidth;
// alert("swipey.preferredWidth: " + swipey.preferredWidth);
swipey.preferredHeight = window.innerHeight; //510 for android
// alert("swipey.preferredHeight: " + swipey.preferredHeight);
//setting the width and height to our wrapper with overflow = hidden
swipey.wrapper.style.width = swipey.preferredWidth + "px";
// alert("swipey.wrapper.style.width: " + swipey.wrapper.style.width);
swipey.wrapper.style.height = swipey.preferredHeight + "px";
// alert("swipey.wrapper.style.height: " + swipey.wrapper.style.height);
//setting the width to our <ul> element which holds all the <li> elements
swipey.slideContainer.style.height = swipey.preferredHeight + "px";
// alert("swipey.slideContainer.style.height: " + swipey.slideContainer.style.height);
swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";
// alert("swipey.slideContainer.style.width: " + swipey.slideContainer.style.width);
//display the <ul> container now
swipey.slideContainer.style.display = "inline-block";
//setting width and height for <li> elements - the slides
for(var i=0;i<swipey.slides.length;i++)
{
swipey.slides[i].style.width = swipey.preferredWidth + "px";
swipey.slides[i].style.height = swipey.preferredHeight + "px";
}
//calculating the max distance of travel for Slide Container i.e <ul> element
swipey.maxDistance = swipey.slides.length * swipey.preferredHeight;
//initialize and assign the touch events
swipey.initEvents();
},
initEvents: function() {
//registering touch events to the wrapper
//$('#wrapper').bind(swipey.startEvent, swipey.startHandler );
$('#wrapper').bind(swipey.startEvent, function(e){
$('#wrapper').bind(swipey.moveEvent, swipey.moveHandler );
} );
$('#wrapper').bind(swipey.endEvent, swipey.endHandler );
//swipey.wrapper.addEventListener(swipey.startEvent, swipey.startHandler, false);
//swipey.wrapper.addEventListener(swipey.moveEvent, swipey.moveHandler, false);
//swipey.wrapper.addEventListener(swipey.endEvent, swipey.endHandler, false);
},
//funciton called when touch start event is fired i.e finger is pressed on the screen
startHandler: function(event) {
//create appropriate event object to read the touch/mouse co-ordinates
var eventObj = swipey.isTouchSupported ? event.touches[0] : event;
//stores the starting X co-ordinate when finger touches the device screen
swipey.startX = eventObj.pageX;
//timer is set on
swipey.timer = setInterval(function() {
swipey.timerCounter++;
}, 10);
swipey.hasSwipeStarted = true;
event.preventDefault(); //prevents the window from scrolling.
},
//funciton called when touch move event is fired i.e finger is dragged over the screen
moveHandler: function(event) {
if (swipey.hasSwipeStarted) {
//create appropriate event object to read the touch/mouse co-ordinates
var eventObj = swipey.isTouchSupported ? event.touches[0] : event;
swipey.distanceX = eventObj.pageX - swipey.startX;
//move the slide container along with the movement of the finger
swipey.slideContainer.style.webkitTransform = "translate3d(" + (swipey.distanceX + swipey.currentDistance) + "px, 0,0)";
}else{
swipey.startHandler(event);
}
},
//funciton called when touch end event is fired i.e finger is released from screen
endHandler: function(event) {
$('#wrapper').unbind(swipey.moveEvent, swipey.moveHandler );
clearInterval(swipey.timer); //timer is stopped
if(swipey.distanceX == 0) //if the intention is to tap on the image then open a link
{
var link_url = event.target.getAttribute("link"); //read the link from <img /> element
// window.open(link_url,"_blank");
}
else
{
if (swipey.distanceX > 0) {
swipey.direction = "right";
}
if (swipey.distanceX < 0) {
swipey.direction = "left";
}
//the following conditions have been discussed in details
if ((swipey.direction == "right" && swipey.currentDistance == 0) || (swipey.direction == "left" && swipey.currentDistance == -(swipey.maxDistance - swipey.preferredWidth))) {
swipey.comeBack();
}
else if (swipey.timerCounter < 30 && swipey.distanceX > 10) {
swipey.moveRight();
}
else if (swipey.timerCounter < 30 && swipey.distanceX < -10) {
swipey.moveLeft();
}
else if (swipey.distanceX <= -(swipey.preferredWidth / 2)) { //-160
swipey.moveLeft();
}
else if (swipey.distanceX >= (swipey.preferredWidth / 2)) { //160
swipey.moveRight();
}
else {
swipey.comeBack();
}
}
swipey.timerCounter = 0; //reset timerCounter
swipey.hasSwipeStarted = false; //reset the boolean var
swipey.distanceX = 0; //reset the distance moved for next iteration
//alert(event.screenX+"::"+event.screenY);
var element = document.elementFromPoint(event.screenX, event.screenY);
var $element = $(element);
alert($element.attr('id'));
$("div.fixHeader").hide();
$("#"+$element.attr('id')+" div.fixHeader").show();
},
moveLeft: function() {
swipey.currentDistance += -swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
//using CSS3 transformations - translate3d function for movement
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
moveRight: function() {
swipey.currentDistance += swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
comeBack: function() {
swipey.slideContainer.style.webkitTransitionDuration = 250 + "ms";
swipey.slideContainer.style.webkitTransitionTimingFunction = "ease-out";
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
}
}; //end of swipey object
window.swipeyObj = swipey; //expose to global window object
})();
window.onload = function() {
swipeyObj.initSwipey();
} //invoke the init method to get started
更新
下面是结构，现在我正在滑动sitePageContainer并且sitePage出现在屏幕上，现在我想知道屏幕上显示哪个div（partypicturespage1或partypicturespage2）
<div id="wrapper">
<div id="sitePageContainer">
<div class="sitePage" id="partypicturespage1"></div>
<div class="sitePage" id="partypicturespage2"></div>
答案 0 :(得分：4)
您可以通过以下方式选择您的可见div：
$("div.fixHeader:visible")
<强>更新
如果所有div都可见，则使用自定义data- *属性来跟踪当前正在查看的div。您可以通过以下方式执行此操作：
$("div.fixHeader").attr('data-visible', true);
并按以下方式选择：
$("div.fixHeader[data-visible=true]");
并删除该属性，因此您不会选择不再在视图中的div：
$("div.fixHeader[data-visible=true]").attr('data-visible', false);
更新＃2：
如果您通过设置容器的left属性来滚动页面，那么通过伪代码中的以下计算来确定视图中的div：
ceil(scrollContainer.left / divWidth) // if index starts from 1
floor(scrollContainer.left / divWidth) // if index starts from 0