我有一组七个 div,具有以下属性:
height: 100px;
width: 100px;
display: inline-block;
我有一个包含这七个 block 的包装器 div,只有足够的空间容纳四个并进行更改。
溢出是隐藏的。
如何实现这个功能,当你在手机上点击并水平拖动,或者用手指滑动时,整行的div block 都会滑动显示之前隐藏的?
请引用this jsFiddle for the example .
我们可以在这里使用css或者jQuery。
*奖励,在容器边缘显示完全隐藏的部分 div。
最佳答案
根据 jfriend00 的回答,我对此进行了修改,使其可以在触摸/单击和使用鼠标移动时使用。
var last_x = null;
var holding = false;
//Mark the wrapper as clicked/touched
$('.wrapper').mousedown(function(){
holding=true;
});
//We do this on document so that even if movement goes outside of the container the event will fire
$(document).mouseup(function(){
holding=false;
});
$('.wrapper').mousemove(function(e){
if(last_x === null || !holding) //If this is the first movement
{
last_x = e.pageX;
return;
}
var ammount = e.pageX - last_x;
$('.slider',this).css('margin-left', '+=' + ammount);
last_x = e.pageX;
});
其工作原理的要点是,当在容器上检测到 mousedown 事件时,脚本开始跟踪所有鼠标移动并使用鼠标移动内容。释放鼠标时,它会停止跟踪移动。
fiddle :http://jsfiddle.net/NvJam/2/
关于javascript - 如何滑动或移动这组 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16092371/