js 实现滑块效果
2024-08-29 22:05:03
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);
最新文章
- 脚本化CSS类-HTML5 classList属性
- Hibernate关联映射 映射文件的配置
- linux xorddos样本分析2
- 实现List按与一个字符串的相似度和字母顺序排序(适用于模糊查询后的排序)
- htmL5 html5Validate
- 解决<;a>;文本本身带下划线和超链接下划线重合的问题
- 降低屏幕亮度,减缓眼疲劳 (linux/windows/firefox/android)
- Moebius集群:SQL Server一站式数据平台
- Java堆
- memcached增删改查
- 使用MyBatis链接MySQL
- Java设计模式系列之工厂模式
- Java之绘制艺术图案
- Leetcode-Database-176-Second Highest Salary-Easy(转)
- 实现径向变换用于样本增强《Training Neural Networks with Very Little Data-A Draft》
- 邮件实现详解(二)------手工体验smtp和pop3协议
- 重写外部图片URL,变成自己的URL
- selenium IDE安装与使用
- JS的防抖和节流
- Python redis 简单介绍