拖动比较图片效果
主要是监听 mousemove（分隔条），巧妙利用 background-image ，和overflow: hidden 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#game {
position: absolute;
width: 4px;
height: 100%;
background-color: beige;
left: 50%;
top: 0;
bottom: 0;
margin-left: -1px;
cursor: ew-resize;
}
</style>
</head>
<body>
<script src="js/jquery.min.js"></script>
<div id="imgBox" style="background-image: url(img/A2.png); text-align: left; width: 768px; height: 515px; position: relative;position: relative;
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-user-drag: none;margin: auto;">
<div id="imgLeft" style="width: 50%; overflow: hidden;">
<img width="768" height="515" onselectstart="return false;" onselect="return false;" src="img/B2.jpg" style="user-select: none; -webkit-user-drag: none;">
</div>
<div class="game" id="game" style="position: absolute; top: 0; left: 50%;"></div>
</div>
<script>
isTouch = 'ontouchstart' in window
var mouseEvents = (isTouch) ?
{
down: 'touchstart',
move: 'touchmove',
up: 'touchend',
over: 'touchstart',
out: 'touchend'
}
:
{
down: 'mousedown',
move: 'mousemove',
up: 'mouseup',
over: 'mouseover',
out: 'mouseout'
}
var eventHandlers = {
touchStart: function () {
}
}
var down = null
document.getElementById("game").addEventListener(mouseEvents.down, function (e, opts, corner) {
down = this
console.log(this)
}, false);
//document 绑定拖动事件中
document.addEventListener(mouseEvents.move, function (e, opts, corner) {
if (down) {
e = e.changedTouches ? e.changedTouches[0] : e//是否为手机端 第一个手指(鼠标):所有手指的第一个(手机)
var offset =$("#imgBox").offset();
//当前 分条 的位置(x,y): (图片宽度+e.x || 5+ e.x )
if (e.pageX > 766+offset.left || e.pageX < 5+offset.left ) return;
$(down).css({ "left": e.pageX - 4-offset.left }) //$(down).css({"left":e.pageX,"top": e.pageY})
$(down).prev().css({ "left": e.pageX-offset.left, "width": e.pageX-offset.left });
console.log(e.pageX)
}
}, false);
document.addEventListener(mouseEvents.up, function (e, opts, corner) {
down = null
}, false);
document.addEventListener(mouseEvents.over, function (e, opts, corner) {
}, false);
</script>
</body>
</html>
图片下载：https://storage.googleapis.com/hific/data/img/shades_HiFiC_Lo.png
https://storage.googleapis.com/hific/data/img/shades_jpg_1x_0.209.jpg
