js 实现滑块效果

复制代码
var dd = $(".drag_bott").removeAttr('id').last().attr('id','drag_bott');
var drag = document.getElementById("drag_bott");
function moveButton(){
    obj = this;
    var intX = event.targetTouches[0].pageX;//点击的X坐标
    var intY = event.targetTouches[0].pageY;//点击的Y坐标
    var right = $(obj).css('left');
    var bottom = $(obj).css('bottom');
    obj.addEventListener('touchmove', function(){
        event.preventDefault();
        var moveX = event.targetTouches[0].pageX;//动态获取鼠的X坐标
        var moveY = event.targetTouches[0].pageY;//动态获取鼠的Y坐标
        var disX = intX-moveX;//差值
        var disY = moveY-intY;//差值
        var movX = parseInt(right)-disX+'px';//目标right值
        var movY = parseInt(bottom)-disY+'px';//目标bottom值
        $(obj).css('left',movX);
        $(obj).css('bottom',movY);
    });
};
drag.addEventListener('touchstart',moveButton,false);
复制代码

 

 

posted @   龍飛鳯舞  阅读(2372)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
历史上的今天:
2016-07-20 php设计模式之策略模式
点击右上角即可分享
微信分享提示