javascript - 如何滑动或移动这组 Div

标签 javascript jquery css

我有一组七个 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/

相关文章:

javascript - 使用 onChange 更新组件。 React-Hooks

Javascript - 检查字符串是否可以转换为整数?

css - Bootstrap 按钮组大小不一样

javascript - JS/Coffee + HTML,设置条件类的更简单方法

PHP Javascript?当用户关闭页面或浏览器时做一些事情

jquery - 相当于 jQuery 中的 document.createElement ('option' )

javascript - 使用 Ajax 渲染部分集合

c# - 如何确保使用 ASP.NET MVC5 和 IIS 7.5 express 刷新 CSS 文件

javascript - HTML/JS 行尾标点符号错误地左对齐

javascript - 当使用 iPhone/iPod touch 浏览我的网站时,单击菜单栏元素将导致它们 "twitching"。为什么?