手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效

ゝ一世哀愁。 2022-10-05 14:49 147阅读 0赞

特效描述：html5手机端 叠加图片 触屏滑动查看特效。html5手机叠加图片手指滑动查看

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

![1.jpg][]

rutrum tellus a tempus :)

![3.jpg][1.jpg]

litora torquent per conubia

![2.jpg][1.jpg]

sed consectetur faucibus

![4.jpg][1.jpg]

eleifend tempus justo

window.addEventListener('load', onWndLoad, false);

function onWndLoad() \{

var slider = document.querySelector('.slider');

var sliders = slider.children;

var initX = null;

var transX = 0;

var rotZ = 0;

var transY = 0;

var curSlide = null;

var Z\_DIS = 50;

var Y\_DIS = 10;

var TRANS\_DUR = 0.4;

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) \{

if (window.CP.shouldStopExecution(1)) \{

break;

images\[i\].onmousemove = function (e) \{

e.preventDefault();

\};

images\[i\].ondragstart = function (e) \{

return false;

\};

window.CP.exitedLoop(1);

function init() \{

var z = 0, y = 0;

for (var i = sliders.length - 1; i >= 0; i--) \{

if (window.CP.shouldStopExecution(2)) \{

break;

sliders\[i\].style.transform = 'translateZ(' + z + 'px) translateY(' + y + 'px)';

z -= Z\_DIS;

y += Y\_DIS;

window.CP.exitedLoop(2);

attachEvents(sliders\[sliders.length - 1\]);

function attachEvents(elem) \{

curSlide = elem;

curSlide.addEventListener('mousedown', slideMouseDown, false);

curSlide.addEventListener('touchstart', slideMouseDown, false);

init();

function slideMouseDown(e) \{

if (e.touches) \{

initX = e.touches\[0\].clientX;

\} else \{

initX = e.pageX;

document.addEventListener('mousemove', slideMouseMove, false);

document.addEventListener('touchmove', slideMouseMove, false);

document.addEventListener('mouseup', slideMouseUp, false);

document.addEventListener('touchend', slideMouseUp, false);

var prevSlide = null;

function slideMouseMove(e) \{

var mouseX;

if (e.touches) \{

mouseX = e.touches\[0\].clientX;

\} else \{

mouseX = e.pageX;

transX += mouseX - initX;

rotZ = transX / 20;

transY = -Math.abs(transX / 15);

curSlide.style.transition = 'none';

curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';

curSlide.style.transform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';

var j = 1;

for (var i = sliders.length - 2; i >= 0; i--) \{

if (window.CP.shouldStopExecution(3)) \{

break;

sliders\[i\].style.webkitTransform = 'translateX(' + transX / (2 \* j) + 'px)' + ' rotateZ(' + rotZ / (2 \* j) + 'deg)' + ' translateY(' + Y\_DIS \* j + 'px)' + ' translateZ(' + -Z\_DIS \* j + 'px)';

sliders\[i\].style.transform = 'translateX(' + transX / (2 \* j) + 'px)' + ' rotateZ(' + rotZ / (2 \* j) + 'deg)' + ' translateY(' + Y\_DIS \* j + 'px)' + ' translateZ(' + -Z\_DIS \* j + 'px)';

sliders\[i\].style.transition = 'none';

j++;

window.CP.exitedLoop(3);

initX = mouseX;

e.preventDefault();

if (Math.abs(transX) >= curSlide.offsetWidth - 30) \{

document.removeEventListener('mousemove', slideMouseMove, false);

document.removeEventListener('touchmove', slideMouseMove, false);

curSlide.style.transition = 'ease 0.2s';

curSlide.style.opacity = 0;

prevSlide = curSlide;

attachEvents(sliders\[sliders.length - 2\]);

slideMouseUp();

setTimeout(function () \{

slider.insertBefore(prevSlide, slider.firstChild);

prevSlide.style.transition = 'none';

prevSlide.style.opacity = '1';

slideMouseUp();

\}, 201);

return;

function slideMouseUp() \{

transX = 0;

rotZ = 0;

transY = 0;

curSlide.style.transition = 'cubic-bezier(0,1.95,.49,.73) ' + TRANS\_DUR + 's';

curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';

curSlide.style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';

var j = 1;

for (var i = sliders.length - 2; i >= 0; i--) \{

sliders\[i\].style.transition = 'cubic-bezier(0,1.95,.49,.73) ' + TRANS\_DUR / (j + 0.9) + 's';

sliders\[i\].style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + Y\_DIS \* j + 'px)' + ' translateZ(' + -Z\_DIS \* j + 'px)';

sliders\[i\].style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + Y\_DIS \* j + 'px)' + ' translateZ(' + -Z\_DIS \* j + 'px)';

j++;

document.removeEventListener('mousemove', slideMouseMove, false);

document.removeEventListener('touchmove', slideMouseMove, false);

[1.jpg]: