36
个编辑
-
汇聚密码安全智慧 共享实战经验!
无编辑摘要 标签:手工回退 移动版编辑 移动版网页编辑 |
无编辑摘要 标签:移动版编辑 移动版网页编辑 |
||
| 第108行: | 第108行: | ||
} | } | ||
ul.width(containerWidth * lis.length).attr({ | // 设置 ul 和 li 的宽度 | ||
ul.css({ | |||
'width': (containerWidth * lis.length) + 'px', | |||
'-webkit-transform': 'translateX(0px)', | |||
'-moz-transform': 'translateX(0px)', | |||
'-ms-transform': 'translateX(0px)', | |||
'-o-transform': 'translateX(0px)', | |||
'transform': 'translateX(0px)', | |||
'-webkit-transition': 'transform 0.73s ease-in-out', | |||
'-moz-transition': 'transform 0.73s ease-in-out', | |||
'-o-transition': 'transform 0.73s ease-in-out', | |||
'transition': 'transform 0.73s ease-in-out' | |||
}).attr({ | |||
'data-left': 0, | 'data-left': 0, | ||
'data-length': lis.length | 'data-length': lis.length | ||
}); | }); | ||
lis.width | lis.css('width', containerWidth + 'px'); | ||
log('设置 ul 宽度: ' + (containerWidth * lis.length) + ', 每个 li 宽度: ' + containerWidth); | log('设置 ul 宽度: ' + (containerWidth * lis.length) + ', 每个 li 宽度: ' + containerWidth); | ||
// | // 强制重绘 | ||
ul | ul[0].offsetHeight; | ||
// 开始滚动 | // 开始滚动 | ||
| 第142行: | 第151行: | ||
} | } | ||
var | var translateX = -(newLeft * containerWidth); | ||
ul.css({ | |||
' | // 重置时先移除 transition,立即跳转,然后恢复 | ||
'transition': ' | if (newLeft === 0) { | ||
ul.css({ | |||
'-webkit-transition': 'none', | |||
'-moz-transition': 'none', | |||
'-o-transition': 'none', | |||
'transition': 'none', | |||
'-webkit-transform': 'translateX(0px)', | |||
'-moz-transform': 'translateX(0px)', | |||
'-ms-transform': 'translateX(0px)', | |||
'-o-transform': 'translateX(0px)', | |||
'transform': 'translateX(0px)' | |||
}); | |||
ul[0].offsetHeight; // 强制重绘 | |||
setTimeout(function() { | |||
ul.css({ | |||
'-webkit-transition': 'transform 0.73s ease-in-out', | |||
'-moz-transition': 'transform 0.73s ease-in-out', | |||
'-o-transition': 'transform 0.73s ease-in-out', | |||
'transition': 'transform 0.73s ease-in-out' | |||
}); | |||
}, 50); | |||
log('设置 transform: translateX(0px)'); | |||
} else { | |||
ul.css({ | |||
'-webkit-transition': 'transform 0.73s ease-in-out', | |||
'-moz-transition': 'transform 0.73s ease-in-out', | |||
'-o-transition': 'transform 0.73s ease-in-out', | |||
'transition': 'transform 0.73s ease-in-out', | |||
'-webkit-transform': 'translateX(' + translateX + 'px)', | |||
'-moz-transform': 'translateX(' + translateX + 'px)', | |||
'-ms-transform': 'translateX(' + translateX + 'px)', | |||
'-o-transform': 'translateX(' + translateX + 'px)', | |||
'transform': 'translateX(' + translateX + 'px)' | |||
}); | |||
log('设置 transform: translateX(' + translateX + 'px)'); | |||
} | |||
dataset.left = newLeft; | dataset.left = newLeft; | ||
}, 5000); | }, 5000); | ||
| 第159行: | 第202行: | ||
if (containerWidth === 0) return; | if (containerWidth === 0) return; | ||
ul.width(containerWidth * lis.length); | ul.css('width', (containerWidth * lis.length) + 'px'); | ||
lis.width | lis.css('width', containerWidth + 'px'); | ||
var currentLeft = parseInt(ul[0].dataset.left) || 0; | var currentLeft = parseInt(ul[0].dataset.left) || 0; | ||
if (currentLeft < 0) currentLeft = 0; | if (currentLeft < 0) currentLeft = 0; | ||
var translateX = -(currentLeft * containerWidth); | |||
ul.css({ | ul.css({ | ||
' | '-webkit-transition': 'transform 0.37s ease-in-out', | ||
'transition': ' | '-moz-transition': 'transform 0.37s ease-in-out', | ||
'-o-transition': 'transform 0.37s ease-in-out', | |||
'transition': 'transform 0.37s ease-in-out', | |||
'-webkit-transform': 'translateX(' + translateX + 'px)', | |||
'-moz-transform': 'translateX(' + translateX + 'px)', | |||
'-ms-transform': 'translateX(' + translateX + 'px)', | |||
'-o-transform': 'translateX(' + translateX + 'px)', | |||
'transform': 'translateX(' + translateX + 'px)' | |||
}); | }); | ||
}); | }); | ||