实例介绍
【实例简介】手机端拖动匹配轮播图
【实例截图】
;(function h() {
document.getElementById('app').style.height =
window.screen.height 'px'
})()
// 事件代理到父元素 通过 e.target 拿到被触发的元素
box.ontouchstart = function aaa(e) {
// 判断是否是需要移动的元素
if (e.target.id != 'box1') return
aa(e.target)
// 移动实物 进行判断
function aa(div1) {
//限制最大宽高，不让滑块出去
var maxW = document.body.scrollWidth
// - div1.offsetWidth
var maxH = document.body.scrollHeight
// - div1.offsetHeight
//手指触摸开始，记录div的初始位置
div1.addEventListener('touchstart', function (e) {
console.log(e)
var ev = e || window.event
var touch = ev.targetTouches[0]
oL = touch.clientX - div1.offsetLeft
oT = touch.clientY - div1.offsetTop
// document.addEventListener('touchmove', defaultEvent, false)
})
let touch = e.targetTouches[0]
let oL = touch.clientX - div1.offsetLeft
let oT = touch.clientY - div1.offsetTop
//触摸中的，位置记录
div1.addEventListener('touchmove', function (e) {
var ev = e || window.event
var touch = ev.targetTouches[0]
var oLeft = touch.clientX - oL
var oTop = touch.clientY - oT
if (oLeft < 0) {
oLeft = 0
} else if (oLeft >= maxW) {
oLeft = maxW
}
if (oTop < 0) {
oTop = 0
} else if (oTop >= maxH) {
oTop = maxH
}
event.preventDefault()
div1.style.position = 'absolute'
div1.style.left = oLeft 'px'
div1.style.top = oTop 'px'
/* 拿到位置进行判断 */
// 判断坐标？
// 拿到数组进行比对
var box1 = document.querySelectorAll('#box1')
// 拿到坐标声明
var boxs = document.querySelectorAll('.boxs1')
// console.log(boxs[0].offsetLeft,);
var boxx = document.querySelectorAll('#boxs')
/* 拿到位置进行判断 */
// 存储图纸坐标 和 id
var boxsAxes = []
// 函数调用push每个dom坐标为对象
function coordinate(boxs, i) {
// console.log(boxs,boxx,i);
let xy = {
x: '',
y: '',
xx: '',
yy: '',
name: '',
}
xy.x = boxs.offsetLeft
xy.y = boxs.offsetTop
xy.xx = boxs.offsetLeft boxs.offsetWidth
xy.yy = boxs.offsetTop boxs.offsetHeight
xy.name = i
return xy
}
// 将对应的坐标一一传入实物DOM中
for (let i = 0; i < box1.length; i ) {
boxsAxes.push(coordinate(boxs[i], i))
// 往实物图添加 name：id
box1[i].name = i
}
// 判断所选的 id 是否 符合
boxsAxes.forEach((item) => {
// console.log(item);
if (item.name == e.target.name) {
// id相等后 判断位置
if (
oLeft 15 >= item.x &&
oLeft - 10 <= item.xx &&
oTop 10 >= item.y &&
oTop - 10 <= item.yy
) {
// console.log(i);
boxx[item.name].style.opacity = 1
e.target.style.display = 'none'
}
}
})
})
// 当被移动的原件未归位时自动返回
// e.target.ontouchend = function fn(e) {
// if (e.target.style.display != 'none') {
// // 位置不对 回到后台
// e.target.style.position = 'static'
// // console.log(e.target.style.position);
// }
// }
}
}
let a = 0
setInterval(()=>{
document.getElementById('time').innerText = a
},1000)
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论