js拖拽到指定地方(js实现组件拖拽)
欢迎来到我的JS毒品特辑系列文章。 更多精彩内容在持续更新。 请关注:)
上一章论述了用js拖动的基本原理。 也就是说,按下鼠标时计算鼠标位置和物理位置的差。 这个差在移动中也不一定。 可以通过鼠标的位置计算物理位置来获得拖动的效果。
本章目标
使用轮播图形的基本布局拖动的变形幻灯片触发图形移动首先让我们来看看今天实现的例子!
手动滑动以改变轮播图
这个效果在我们传统的网络APP中很常见。 让我们逐一分析一下这个效果的核心技术。
布局
母容器,我们将其宽度高度设定为照片宽度的高度,容器中三张同样大小的照片排成一列。html:
然后,需要将ul中的li元素水平排列。 方法有很多。 我使用的是CSS3的flex布局。
CSS :
将父容器设定为overflow:hidden,隐藏溢出的内容。 因为ul下面的图像可能是我们任意的,所以动态计算ul的宽度:
ul.style.width=两个沥青的宽度*沥青长度;
这里li的宽度高度和图像的宽度高度一样,不再动态获取,而是直接进行了硬编码。
var容器w=520;
ul.style.width=Li.length *容器w ' px ';
到此为止,基本上完成了。 以下是核心js拖动的变形。
让我们从
拖拽的变形
gif地图分析一下:一、我可以拖着ul左右滑动。 这个时候,必须注意。 ul的滑动距离正好是按下鼠标时和移动时的位置差。 即mousedown时,获取鼠标的开始位置
ul.onmousedown=e={
var startX=e.pageX;
}
轮播图有一个中心变量,即当前显示的是第几张图。 将其定义为iNow
鼠标抬起时,如果滑动距离小于li宽度的1/3,则无法进入下一张图像。 否则,进入下一张图片,设置动画。
文档. onmouseup=e={
if (e.pagex -星际争霸3 )
国际航空公司; //上一张照片
else if (startx-e.pagexcontainerw/3 ) {
this.inow----; //下一张
}
ul.style.transition='.3s ';
ul.style.transform=' translate x ((this.inow *容器w ) ) px );
文档. onmouseup=文档. onmousemove=空值;
}
完整代码:
实现了这样简单的滑动轮播效果。
总结:
1、轮播图形的基本布局,水平排列成一列,然后在父级设置溢出隐藏。2、水平拖动ul,鼠标按下和移动引起的距离差就是现在ul的滑动距离。
3、释放鼠标按钮时,判断滑动距离与图像宽度的1/3相比,图像是停留在当前页上,还是停留在上一页的下一页上。 (这1/3是我定制的,必要时可以自己调整。
这里是【粗暴的朋友聊天技术】JS拖动特辑系列的技术报道,更多精彩内容在持续更新。
还没有手续。