前后对比图 – 有爱前端

https://codepen.io/nosurprisethere/pen/JJzdoP

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Before After 3 Layer Image Slider (Vanilla)</title> <style type="text/css"> /* You can remove this page div in your website */ #page{ width:100%; height:100%; position:absolute; background:#eee; } /* Our normalize css */ *{ margin:0; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Our wrapper */ .wrapper{ width: 690px; height: 600px; max-height:100vh; position: absolute; left:50%; top:50%; transform:translate3d(-50%,-50%,0); overflow:hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* Our image information */ .bottom, .middle, .top { width:100%; height:100%; background-repeat:no-repeat; background-color: white; background-size: cover; background-position: center; position: absolute; top:0; left:0; pointer-events:none; overflow: hidden; &>img{ height:100%; } } .top{ width:125px; } .scroller{ width: 50px; height:50px; position: absolute; left:100px; top:50%; transform:translateY(-50%); border-radius:50%; background-color: #fff; opacity:0.9; transition: opacity 0.12s ease-in-out; pointer-events:auto; cursor: pointer; box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2); } .scroller-middle{ margin-top:25px; } .scroller-top{ margin-top:-25px; } .scroller:hover{ opacity:1; } .scrolling{ pointer-events:none; opacity:1; // z-index: 1; } .scroller__thumb{ width:100%; height:100%; border-radius:50%; padding: 7px; } .scroller:before, .scroller:after{ content:" "; display: block; width: 7px; height: 9999px; position: absolute; left: 50%; margin-left: -3.5px; z-index: 30; transition:0.1s; box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2); } .scroller:before{ top:49px; } .scroller:after{ bottom:49px; } /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */ .scroller-middle>.scroller__thumb{ border: 5px solid #FFCCBC; } .scroller-middle:before, .scroller-middle:after{ background: #FFCCBC; } .scroller-top>.scroller__thumb{ border: 5px solid #FFAB91; } .scroller-top:before, .scroller-top:after{ background: #FFAB91; } </style> </head> <body> <div id="page"> <div class="wrapper"> <div class="bottom"> <img src="http://i67.tinypic.com/2eo86ew.jpg" draggable="false"/> </div> <div class="middle"> <img src="http://i64.tinypic.com/15i68sz.jpg" draggable="false"/> </div> <div class="scroller scroller-middle"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#FFCCBC"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#FFCCBC"/></svg> </div> <div class="top"> <img src="http://i64.tinypic.com/2ppni55.jpg" draggable="false"/> </div> <div class="scroller scroller-top"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#FFAB91"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#FFAB91"/></svg> </div> </div> </div> </body> <script type="text/javascript"> // I hope this over-commenting helps. Let's do this! // Let's use the 'active' variable to let us know when we're using it let active = false; // and define our dom elements to make it easier to read let scrollerMiddle = document.querySelector('.scroller-middle'); let scrollerTop = document.querySelector('.scroller-top'); // First we'll have to set up our event listeners // We want to watch for clicks on our scroller scrollerMiddle.addEventListener('mousedown',function(){ active = "middle"; // Add our scrolling class so the scroller has full opacity while active scrollerMiddle.classList.add('scrolling'); }); // We also want to watch the body for changes to the state, // like moving around and releasing the click // so let's set up our event listeners document.body.addEventListener('mouseup',function(){ active = false; scrollerMiddle.classList.remove('scrolling'); }); document.body.addEventListener('mouseleave',function(){ active = false; scrollerMiddle.classList.remove('scrolling'); }); // We'll have to do the same for our top scroller scrollerTop.addEventListener('mousedown',function(){ active = "top"; scrollerTop.classList.add('scrolling'); }); document.body.addEventListener('mouseup',function(){ active = false; scrollerTop.classList.remove('scrolling'); }); document.body.addEventListener('mouseleave',function(){ active = false; scrollerTop.classList.remove('scrolling'); }); // Let's figure out where their mouse is at document.body.addEventListener('mousemove',function(e){ if (!active) return; // Their mouse is here... let x = e.pageX; // but we want it relative to our wrapper x -= document.querySelector('.wrapper').getBoundingClientRect().left; // Okay let's change our state scrollIt(x); }); // Let's use this function function scrollIt(x){ // Calculate our transform let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth))); // we show all our bottom image but how much of our middle and top, // that'll depend on what we're dragging // if we're dragging the middle slider if (active==="middle"){ document.querySelector('.middle').style.width = transform+"px"; scrollerMiddle.style.left = transform-25+"px"; // if we're using scroller-middle, middle must always be to the right of top if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){ document.querySelector('.top').style.width = transform-5+"px"; scrollerTop.style.left = transform-30+"px"; } } // if we're dragging the top slider if (active==="top"){ document.querySelector('.top').style.width = transform+"px"; scrollerTop.style.left = transform-25+"px"; // if we're using scroller-top, top must always be to the left if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){ document.querySelector('.middle').style.width = transform+5+"px"; scrollerMiddle.style.left = transform-20+"px"; } } } // Let's set our opening state based off the width, // we want to show a bit of both images so the user can see what's going on active = "middle"; scrollIt(460); active = "top"; scrollIt(230); active = false; // And finally let's repeat the process for touch events // first our middle scroller... scrollerMiddle.addEventListener('touchstart',function(){ active = "middle"; scrollerMiddle.classList.add('scrolling'); }); document.body.addEventListener('touchend',function(){ active = false; scrollerMiddle.classList.remove('scrolling'); }); document.body.addEventListener('touchcancel',function(){ active = false; scrollerMiddle.classList.remove('scrolling'); }); // then scroller top, our second scroller scrollerTop.addEventListener('touchstart',function(){ active = "top"; scrollerTop.classList.add('scrolling'); }); document.body.addEventListener('touchend',function(){ active = false; scrollerTop.classList.remove('scrolling'); }); document.body.addEventListener('touchcancel',function(){ active = false; scrollerTop.classList.remove('scrolling'); }); document.querySelector('.wrapper').addEventListener('touchmove',function(e){ if (!active) return; e.preventDefault(); let x = e.touches[0].pageX; x -= document.querySelector('.wrapper').getBoundingClientRect().left; scrollIt(x); }); </script> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片对比</title>  <style type="text/css"> body { position: relative; background-color: #DDDDDD; font-family: 'helvetica', sans-serif; font-weight: lighter; font-size: 14px; color: #555; margin: 0; padding: 0; min-width: 320px; } a { position: relative; color: #a8244f; text-decoration: none; } a:before { content: ""; height: 2px; position: absolute; bottom: -5px; left: 0; right: 0; background-color: #7e1b3b; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } a:hover { color: #7e1b3b; text-decoration: none; } a:hover:before { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .split { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: strech; -ms-flex-align: strech; align-items: strech; } .split p { -ms-flex-preferred-size: 100%; flex-basis: 100%; } @media screen and (min-width: 767px) { .split p { -ms-flex-preferred-size: 48%; flex-basis: 48%; } } .container { position: relative; width: 100%; margin: 50px 0; } .container .inner { position: relative; width: 100%; max-width: 960px; margin: 0 auto; overflow: hidden; box-sizing: border-box; padding: 20px 30px; background-color: #EEE; } .comparison-slider-wrapper { position: relative; width: 100%; margin: 20px 0; background-color: white; } .comparison-slider-wrapper .comparison-slider { position: relative; width: 100%; margin: 0; border: 5px white solid; box-sizing: border-box; } .comparison-slider-wrapper .comparison-slider > img { width: 100%; height: auto; display: block; } .comparison-slider-wrapper .comparison-slider .overlay { display: none; position: absolute; width: 250px; bottom: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.4); padding: 10px; box-sizing: border-box; color: #DDD; text-align: right; } @media screen and (min-width: 767px) { .comparison-slider-wrapper .comparison-slider .overlay { display: block; } } .comparison-slider-wrapper .comparison-slider .resize { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; } .comparison-slider-wrapper .comparison-slider .resize > img { display: block; } .comparison-slider-wrapper .comparison-slider .resize .overlay { right: auto; left: 20px; text-align: left; } .comparison-slider-wrapper .comparison-slider .divider { position: absolute; width: 2px; height: 100%; background-color: rgba(255, 255, 255, 0.2); left: 50%; top: 0; bottom: 0; margin-left: -1px; cursor: ew-resize; } .comparison-slider-wrapper .comparison-slider .divider:before { content: ""; position: absolute; width: 20px; height: 20px; left: -9px; top: 50%; margin-top: -10px; background-color: white; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .comparison-slider-wrapper .comparison-slider .divider:after { content: ""; position: absolute; width: 12px; height: 12px; left: -5px; top: 50%; margin-top: -6px; background-color: white; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .comparison-slider-wrapper .comparison-slider .divider.draggable:before { width: 30px; height: 30px; left: -14px; margin-top: -15px; } .comparison-slider-wrapper .comparison-slider .divider.draggable:after { width: 20px; height: 20px; left: -9px; margin-top: -10px; background-color: #555; } .comparison-slider-wrapper .caption { position: relative; width: 100%; padding: 10px; box-sizing: border-box; font-size: 12px; font-style: italic; } </style> </head> <body> <div class="container"> <div class="inner"> <h3>A cool way to show diferences between two image, using CSS3 and jQuery.</h3>  <div class="comparison-slider-wrapper">  <div class="comparison-slider"> <div class="overlay">And I am the <strong>after</strong> image.</div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/marioPhoto-2.jpg" alt="marioPhoto 2">  <div class="resize"> <div class="overlay">I am the <strong>before</strong> image.</div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/marioPhoto-1.jpg" alt="marioPhoto 1"> </div>  <div class="divider"></div> </div> </div>  </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>+ <script type="text/javascript"> "use strict"; $(document).ready(function () { // If the comparison slider is present on the page lets initialise it, this is good you will include this in the main js to prevent the code from running when not needed if ($(".comparison-slider")[0]) { (function () { var compSlider = $(".comparison-slider"); //let's loop through the sliders and initialise each of them compSlider.each(function () { var compSliderWidth = $(this).width() + "px"; $(this).find(".resize img").css({ width: compSliderWidth }); drags($(this).find(".divider"), $(this).find(".resize"), $(this)); }); //if the user resizes the windows lets update our variables and resize our images $(window).on("resize", function () { var compSliderWidth = compSlider.width() + "px"; compSlider.find(".resize img").css({ width: compSliderWidth }); }); })(); } }); // This is where all the magic happens // This is a modified version of the pen from Ege Görgülü - https://codepen.io/bamf/pen/jEpxOX - and you should check it out too. function drags(dragElement, resizeElement, container) { // This creates a variable that detects if the user is using touch input insted of the mouse. var touched = false; window.addEventListener('touchstart', function () { touched = true; }); window.addEventListener('touchend', function () { touched = false; }); // clicp the image and move the slider on interaction with the mouse or the touch input dragElement.on("mousedown touchstart", function (e) { //add classes to the emelents - good for css animations if you need it to dragElement.addClass("draggable"); resizeElement.addClass("resizable"); //create vars var startX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX; var dragWidth = dragElement.outerWidth(); var posX = dragElement.offset().left + dragWidth - startX; var containerOffset = container.offset().left; var containerWidth = container.outerWidth(); var minLeft = containerOffset + 10; var maxLeft = containerOffset + containerWidth - dragWidth - 10; //add event listner on the divider emelent dragElement.parents().on("mousemove touchmove", function (e) { // if the user is not using touch input let do preventDefault to prevent the user from slecting the images as he moves the silder arround. if (touched === false) { e.preventDefault(); } var moveX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX; var leftValue = moveX + posX - dragWidth; // stop the divider from going over the limits of the container if (leftValue < minLeft) { leftValue = minLeft; } else if (leftValue > maxLeft) { leftValue = maxLeft; } var widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + "%"; $(".draggable").css("left", widthValue).on("mouseup touchend touchcancel", function () { $(this).removeClass("draggable"); resizeElement.removeClass("resizable"); }); $(".resizable").css("width", widthValue); }).on("mouseup touchend touchcancel", function () { dragElement.removeClass("draggable"); resizeElement.removeClass("resizable"); }); }).on("mouseup touchend touchcancel", function (e) { // stop clicping the image and move the slider dragElement.removeClass("draggable"); resizeElement.removeClass("resizable"); }); } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 前后对比图