making a resizable div effect in vanilla js

scroll image compare



<!DOCTYPE html>

<html lang="zh-Hans">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta name="author" content="xgqfrms">

  <meta name="generator" content="VS code">

  <title>scroll image compare</title>

  <style>

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }

    .home-sec {

      padding-top: 64px;

      padding-bottom: 80px;

    }

    .before-after {

      background: #283593;

    }

    .home-col {

      width: 100%;

      max-width: 1024px;

      padding-left: 32px;

      padding-right: 32px;

      margin-left: auto;

      margin-right: auto;

      box-sizing: border-box;

    }

    .home-sec h2 {

      text-align: center;

    }

    .before-after .container {

      width: 100%;

      border-radius: 4px;

      overflow: hidden;

      position: relative;

      cursor: col-resize;

      box-shadow: 0 12px 24px 0;

      rgba(0,0,0,.18);

      min-height: 300px;

    }

    .before-after .before {

      position: absolute;

      height: 100%;

      top: 0;

      left: 0;

      overflow: hidden;

      border-right: 4px solid #00a2eb;

      box-sizing: border-box;

    }

    .before-after .before img {

      display: flex;

      height: 100%;

    }

  </style>

</head>

<body>

  <header>

    <h1>scroll image compare</h1>

  </header>

  <main class="before-after home-sec">

    <article class="home-col">

      <h2 style="color: white;">Before &amp; After</h2>

      <section class="before-after">

        <div class="container">

          <!-- <div class="before" style="width: 972.5px;"> -->

          <div class="before" style="width: 484.5px;">

            <img srcset="https://cdn.xgqfrms.xyz/css-effects-all-in-one/images/before.png">

          </div>

          <img srcset="https://cdn.xgqfrms.xyz/css-effects-all-in-one/images/after.png" class="after">

<!--           <div class="before" style="width: 484.5px;">

            <img src="https://www.fika.io/img/origin.290c77e9.png" srcset="https://cdn.xgqfrms.xyz/css-effects-all-in-one/images/before.png">

          </div>

          <img src="https://www.fika.io/img/latte.f6f60fee.png" srcset="https://cdn.xgqfrms.xyz/css-effects-all-in-one/images/after.png" class="after"> -->

        </div>

      </section>

      <div>

        <a href="https://www.fika.io/">https://www.fika.io/</a>

      </div>

    </article>

  </main>

  <footer>

    <p>copyright&copy; xgqfrms 2020</p>

  </footer>

  <!-- js -->

  <script>

    const log = console.log;

    // const div = document.querySelector(`[class="before"]`);

    const div = document.querySelector(`div.before`);

    const box = document.querySelector(`div.container`);

    // log(`box`, box)

    // box.addEventListener(`mousedown`, (e) => {

    //   log(`mousedown`, e);

    // });

    box.addEventListener(`mousemove`, (e) => {

      // log(`mousemove`, e);

      const {

        offsetX,

        offsetY,

      } = e;

      // log(`offsetX`, offsetX);

      // div.style.width = offsetX;

      div.style.width = offsetX + `px`;

    });

    // box.addEventListener(`scroll`, (e) => {

    //   log(`scroll`, e);

    // });

    // box.addEventListener(`move`, (e) => {

    //   log(`move`, e);

    // });

  </script>

</body>

</html>

See the Pen scroll image compare by xgqfrms
(@xgqfrms) on CodePen.

refs

https://codepen.io/xgqfrms/pen/wvMQqZL

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

making a resizable div effect in vanilla js的更多相关文章

  1. JavaScript代码编写尝试使用Vanilla JS 或者Jquery插件

    From Here: http://vanilla-js.com/ Vanilla JS is a fast, lightweight, cross-platform frameworkfor bui ...

  2. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  3. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  4. 页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  5. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  6. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  7. [Tools] Unlock TypeScript's Features in Vanilla JS with @ts-check and JSDoc

    TypeScript can help you with your plain JavaScript files if you add a simple //@ts-check comment. Th ...

  8. js 实现div模块的截图并下载功能（可制作长图）

    当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码首先我们需要引入2个js文件: <script type="text/ja ...

  9. JaveWeb 公司项目（7）----- 通过JS动态生成DIV

    Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...

随机推荐

  1. 记一次Nginx反向代理500的排查记录

    今天公司项目遇到一个奇怪的问题,记录一下. 注: 数据已经过脱敏处理,未暴露公司具体的IP等数据. TLDR; 项目简单介绍 用 Vue + ElementUI 实现的后台项目(以下简称:a-proj ...

  2. UserControl和CustomControl两者区别

    UserControl 将多个WPF控件(例如:TextBox,TextBlock,Button)进行组合成一个可复用的控件组: 由XAML和Code Behind代码组成: 不支持样式/模板重写: ...

  3. java.lang.IllegalStateException Unable to find a @SpringBootConfiguration错误解决方案

    问题描述:java.lang.IllegalStateException: Unable to find a @SpringBootConfiguration, you need to use @Co ...

  4. 最短路-朴素版Dijkstra算法&堆优化版的Dijkstra

    朴素版Dijkstra 目标 找到从一个点到其他点的最短距离 思路 ①初始化距离dist数组,将起点dist距离设为0,其他点的距离设为无穷(就是很大的值) ②for循环遍历n次,每层循环里找出不在S ...

  5. 小米和MAC触摸板手势汇总

    小米的触摸手势: 左键:单指单击 右键:双指单击 选取并打开:单指双击 滚动页面:双指 移动 拖拽项目:双击并拖拽 放大/缩小:双指张开,双指捏合 MAC触摸板手势: http://www.cr173 ...

  6. 调用个别f5 负载端口为80的vs时，返回值为空的问题

    现状: vs负载端口为80并添加XFF,pool包含2个member,member的monitor端口为80&9000. 故障现象: 应用同事描述说再完全复制了一个member并添加到pool ...

  7. Pytest（3）fixture的使用

    fixture的优势 Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进: 命名方式灵活,不局限于 setup 和teardown 这几个命名 conf ...

  8. 2019牛客暑期多校训练营（第九场）B Quadratic equation （平方剩余）

    \((x+y)\equiv b\pmod p\) \((x\times y)\equiv c\pmod p\) 由第一个式子可知:\(x+y=b~or~x+y=b+p\) 先任选一个代入到第二个式子里 ...

  9. int和longlong的范围

    unsigned   int     0-4294967295   (10位数,4e9) int                        -2147483648-2147483647  (10位 ...

  10. hdu5489 Removed Interval

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...