making a resizable div effect in vanilla js
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 & 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© 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的更多相关文章
- JavaScript代码编写尝试使用Vanilla JS 或者Jquery插件
From Here: http://vanilla-js.com/ Vanilla JS is a fast, lightweight, cross-platform frameworkfor bui ...
- 动态添加div及对应的js、css文件
动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...
- js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到
js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容
- 页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
- jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案
1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...
- 页面DIV弹出层 JS原生脚本
<script type="text/javascript"> /* * 弹出DIV层 */ function showDiv() { ...
- [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 ...
- js 实现div模块的截图并下载功能（可制作长图）
当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码首先我们需要引入2个js文件: <script type="text/ja ...
- JaveWeb 公司项目（7）----- 通过JS动态生成DIV
Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...
随机推荐
- 计算机网络安全 —— 报文摘要算法 ME5 （三）
一.报文摘要算法基本概念 使用加密通常可达到报文鉴别的目的,因为伪造的报文解密后一般不能得到可理解的内容.但简单采用这种方法,计算机很难自动识别报文是否被篡改.另外,对于不需要保密而只需要报文鉴别的网 ...
- C#高级编程第11版 - 第六章 索引
[1]6.2 运算符 1.&符在C#里是逻辑与运算.管道符号|在C#里则是逻辑或运算.%运算符用来返回除法运算的余数,因此当x=7时,x%5的值将是2. [2]6.2.1 运算符的简写 1.下 ...
- cc 攻击
糟糕,系统又被攻击了 原创 二马读书 二马读书 10月16日 几年前,我们的电商平台遭遇过一次CC攻击(一种分布式网络攻击,后面有详细介绍
- 用RabbitMQ了好几年之后，我总结出来5点RabbitMQ的使用心得
大概从 2013 年开始,我就开始了自己和 RabbitMQ 的接触,到现在已经有七年多了. 在这七年中,既有一些对 RabbitMQ 的深度体验,更有无数的血泪史. 而根据我这么多年的使用经验,我将 ...
- Git轻松入门1：本地仓库篇
什么是Git 版本控制系统 首先我们要明白,什么是版本控制系统(version control systems)? 版本控制系统,顾名思义,就是能控制文件处于哪个版本的系统. e.g. 你在博客园里编 ...
- Java项目开发流程（）
1项目启动 2需求调研 3系统设计详细设计 4程序开发 5测试 6试用培训维护 项目成员组成 1需求工程师其要求 2系统分析师设计师其要求 3开发工程师其要求 4测试工程师其要求 5管理人员 6其他人 ...
- SealClient
import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOException; import ja ...
- Jenkins Pipelines+Docker执行RobotFramework自动化测试
一.Jenkins Pipelines介绍 Pipeline,简而言之,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排与 ...
- 如何为Kafka集群确定合适的分区数以及分区数过多带来的弊端
通过之前的文章<Kafka分区分配策略>和<Kafka高性能揭秘>,我们了解到:Kafka高吞吐量的原因之一就是通过partition将topic中的消息保存到Kafka集群中 ...
- HashMap源码（JDK1.8）-手动注释
HashMap简介 HashMap是一种K-V映射的一种数据结构,通过K(key)值能实现在O(1)的时间复杂度下找到对应的V(value).JDK1.8之前,HashMap的底层数据结构是数组+链表 ...