模拟腾讯、携程、百度音乐 移动端图片切换第一版
1.啥也不说看看标题中的那些名企的效果
2.具体实现过程(晚上详细解释具体实现细节,先贴出代码)
var disX = 0; var initLeft = 0; oUl.addEventListener('touchstart', function (ev) { var oEvent = ev || event; oEvent.preventDefault(); var touch = oEvent.touches[0]; disX = touch.clientX; initLeft = this.offsetLeft; }); oUl.addEventListener('touchmove', function (ev) { var oEvent = ev || event; oEvent.preventDefault(); if (oEvent.targetTouches.length == 1) { var touch = oEvent.touches[0]; var moveDisx = initLeft + touch.clientX - disX; if (moveDisx <= -this.offsetWidth / 2) { this.style.left = 0; } else if (moveDisx >0) { this.style.left = -this.offsetWidth / 2 + moveDisx + 'px'; } else { this.style.left = moveDisx + 'px'; } } }, false); oUl.addEventListener('touchend', function (ev) { var linear = this.offsetLeft > 0 ? true : false; var currIndex = Math.round(Math.abs(this.offsetLeft) / 320.0); document.title = currIndex; $(this).stop(true).animate({ "left": linear?(currIndex * w):(currIndex * -w) + 'px' }, 'slow'); });
3、扫二维码查看效果
生活没有输赢,不要在乎别人如何评价你,开心就好。
QQ群:158138959