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. ES数据库高可用配置

    ES高可用集群部署 1.ES高可用架构图 2.创建ES用户组 1.Elasticsearch不能在 root 用户下启动,我们需要在三台机器上分创建一个普通用户# 创建elastic用户 userad ...

  2. 记录list.remove()和list.pop()

    list.remove(obj):这个是移除列表中某个值的第一个匹配项 list.pop(index):这个是移除列表中下标为index的元素 当元素全是数字或者有数字时注意区分.

  3. 解决 win10 无法安装VS2019，visual studio installer下载进度始终为0

    解决 win10 无法安装VS2019,visual studio installer下载进度始终为0 目录 解决 win10 无法安装VS2019,visual studio installer下载 ...

  4. 基于final shell的linux命令

    final shell操作教程: 1.查看API实时日志:cd ../../data/log/api tail -100f anyAPI-server.log2.关闭日志:control+c3.恢复实 ...

  5. 我感兴趣的 .NET 开源项目

    Gui.cs - 用于.NET 的控制台终端 UI 工具包 https://github.com/migueldeicaza/gui.cs Newtonsoft.Json - 高性能的 JSON 解析 ...

  6. PostgreSQL创建只读权限的用户

    1.创建只读角色 CREATE ROLE readaccess; 2.授予对现有表的访问权限 GRANT USAGE ON SCHEMA public TO readaccess; GRANT SEL ...

  7. 分布式缓存 — memcache

    MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高了网站访问的速度.Mem ...

  8. [POJ1985] Cow Marathon 「树的直径」

    >传送门< 题意:求树的直径 思路:就是道模板题,两遍dfs就求出来了 Code #include <cstdio> #include <iostream> #in ...

  9. 2020 ICPC Universidad Nacional de Colombia Programming Contest

    2020 ICPC Universidad Nacional de Colombia Programming Contest A. Approach 三分 显然答案可以三分,注意\(eps\)还有两条 ...

  10. C. New Year Book Reading

    New Year is coming, and Jaehyun decided to read many books during 2015, unlike this year. He has n b ...