作者 anyv
1 个管道 的构建 通过 耗费 1 秒

4

// 删除默认
document.addEventListener('DOMContentLoaded', function() {
// var oUl = document.getElementsById('ad_contentUl')[0];
var oUl = document.querySelector('#ad_contentUl');
var aLi = oUl.querySelectorAll('li');
var aDiv = document.querySelectorAll('.ad_conBox');
var aDel = document.querySelectorAll('.ad_move');
var aMo = document.querySelectorAll('.ad_mo');
var imgs = document.querySelectorAll('.select_img img');
var host = '/themes/simpleboot3/public/assets/';
var n = 0;
for (var i = 0; i < aLi.length; i++) {
console.log(i);
aLi[i].index = i;
// 滑动开始
aLi[i].addEventListener('touchstart', function(ev) {
ev.preventDefault();
var oldX = ev.targetTouches[0].pageX;
console.log(oldX);
function fnMove(ev) {
ev.preventDefault();
var newX = ev.targetTouches[0].pageX - oldX;
aLi[this.index].style.transform = 'translateX(' + newX + 'px)';
}
function fnEnd(ev) {
aLi[this.index].removeEventListener('touchmove', fnMove, false);
aLi[this.index].removeEventListener('touchend', fnEnd, false);
ev.preventDefault();
var changeX = ev.changedTouches[0].pageX;
if (oldX - changeX > 40) {
aLi[this.index].style.transition = '1s all ease';
aLi[this.index].style.transform = 'translateX(-2.58rem)';
} else {
aLi[this.index].style.transform = 'translateX(0)';
}
}
aLi[this.index].addEventListener('touchmove', fnMove, false);
aLi[this.index].addEventListener('touchend', fnEnd, false);
}, false)
// 删除按钮
aDel[i].index = i;
aDel[i].addEventListener('touchstart', function() {
this.innerHTML = '';
this.style.height = '0';
this.style.display = 'none';
aLi[this.index].style.height = '0';
aLi[this.index].style.display = 'none';
aDiv[this.index].style.height = '0';
aDiv[this.index].style.display = 'none';
aDiv[this.index].innerHTML = '';
this.addEventListener('transitionend', function() {
oUl.removeChild(aLi[this.index]);
}, false)
}, false);
aMo[i].index = i;
aMo[i].addEventListener('touchstart', function() {
// var adName = document.querySelectorAll('.ad_conMo');
$('.ad_conMo').eq(this.index).css('display', 'block').parents('li').siblings().find('.ad_conMo').css('display', 'none')
}, false);
imgs[i].index =i;
imgs[i].addEventListener('touchstart',function(){
if($(this).attr('src') == host+'images/39_0.png'){
$(this).attr('src',host+'images/73.png').parents('li').siblings().find('.select_img img').attr('src',host+'images/39_0.png');
}else{
$(this).attr('src',host+'images/39_0.png')
}
})
}
}, false);
... ...