фото до и после с поддержкой мобильных touch-событий
:write:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
html, body{
height: 100%;
}
.container {
width: 50%;
height: 38%;
margin: 80px auto;
position: relative;
}
.container > .top , .container > .bottom{
height: 100%; width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background-repeat: no-repeat;
background-size: cover;
background-image: url(http://s00.yaplakal.com/pics/pics_preview/6/1/9/9965916.jpg);
}
.container > .bottom{
background-image: url(http://s00.yaplakal.com/pics/pics_preview/7/1/9/9965917.jpg);
}
.container > .bar {
height: 100%;
width: 3px;
position: absolute;
top: 0px;
left: 50%;
background: green;
cursor: move;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var mousedown = "mousedown",
mousemove = "mousemove",
mouseup = "mouseup";
var touch = !!("ontouchstart" in window);
if (touch) mousedown = "touchstart", mousemove = "touchmove", mouseup = "touchend";
[].forEach.call(document.querySelectorAll(".container"), function(container) {
var bottom = container.querySelector(".bottom"),
bar = container.querySelector(".bar"),
left, h = container.clientHeight,
w = container.clientWidth;
var init = function(e) {
e.preventDefault();
touch && (e = e.changedTouches[0]);
left = e.clientX - this.offsetLeft;
h = container.clientHeight;
w = container.clientWidth;
clip(left);
container.addEventListener(mousemove, move, true);
window.addEventListener(mouseup, stop, true)
};
var move = function(e) {
touch && (e = e.changedTouches[0]);
var x = e.clientX - this.offsetLeft;
x = Math.min(w, Math.max(0, x));
clip(x)
};
var clip = function(left) {
bottom.style.clip = "rect(0," + left + "px," + h + "px,0)";
bar.style.left = left + "px"
};
clip(w / 2);
var stop = function(e) {
container.removeEventListener(mousemove, move, true);
window.removeEventListener(mouseup,
stop, true)
};
container.addEventListener(mousedown, init, true)
})
});
</script>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="bar"></div>
</div>
<div class="container">
<div class="top" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/4/2/9/9965924.jpg)"></div>
<div class="bottom" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/5/2/9/9965925.jpg)"></div>
<div class="bar"></div>
</div>
</body>
</html>
|