首页 > 其他分享 >html 图片处理前后 滑动效果

html 图片处理前后 滑动效果

时间:2023-11-22 21:23:52浏览次数:30  
标签:scroller top height html querySelector 滑动 document 100% 图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* You can remove this page div in your website */

* {
    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;
}

.wrapper {
    width: 100%;
    height: 100%;
    /* height: 600px;
    max-height: 100vh; */
    position: absolute;
    overflow: hidden;
}

.bottom,
.top {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}
.scroller {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 100px;
    top: 50%;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
.scroller-top {
    margin-top: -25px;
}

.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;
}
.scroller:before {
    top: 49px;
}
.scroller:after {
    bottom: 49px;
}

.scroller-top>.scroller__thumb {
    border: 5px solid #FFAB91;
}
.scroller-top:before,
.scroller-top:after {
    background: #FFAB91;
}
.imgcommon {
      width: 100%;
      height: 100%;
    }
  </style>

  <script>
let active = false;

function scrollIt(x) {
  let transform = Math.max(0, (Math.min(x, document.querySelector('.wrapper').offsetWidth)));
  // document.querySelector('.top').style.width = transform + "px";
  document.querySelector('.top').style.clipPath = `polygon(0% 0, ${ transform + "px"} 0, ${ transform + "px"} 100%, 0 100%)`;
  document.querySelector('.scroller-top').style.left = transform - 25 + "px";
}

function releaseMouse(){
  active = false;
}
function captureMouse(){
  active = true;
}

window.onload=function(){
  // We'll have to do the same for our top scroller
  document.querySelector('.scroller-top').addEventListener('mousedown', captureMouse);
  document.body.addEventListener('mouseup', releaseMouse);
  document.body.addEventListener('mouseleave', releaseMouse);
  document.body.addEventListener('touchend', releaseMouse);
document.body.addEventListener('touchcancel', releaseMouse);

  // 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);
  });
  document.querySelector('.scroller-top').addEventListener('touchstart', captureMouse, { passive: true });

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);
}, { passive: true });

  scrollIt(460);
  active = false;
};

  </script>
</head>

<body>
    <div class="wrapper">
        <div class="bottom">
            <img src="./a.jpg" draggable="false" class="imgcommon" />
        </div>
        <div class="top">
            <img src="./test.png" draggable="false" class="imgcommon"/>
        </div>
        <div class="scroller scroller-top">
            <svg class="scroller__thumb" xmlns="https://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>
</body>

</html>

标签:scroller,top,height,html,querySelector,滑动,document,100%,图片
From: https://www.cnblogs.com/ives/p/17850324.html

相关文章

  • php 多图片下载
    参考链接:https://www.cnblogs.com/sanplit/p/6483432.htmlpublicfunctiondownAllImageQrcode(){$data=QrcodeProductImage::field(['id','image'])->where('is_delete','0')->select()->toArray();foreach($data......
  • html基础测试题
    1.html指的是什么?超文本标记语言(HyperTextMarkupLanguage)2.Web标准的制定者是?万维网联盟(W3C)3.在下列的HTML中,哪个是最大的标题?<h1>4 . 在下列的HTML中,哪个可以插入折行?<br>5 . 在下列的HTML中,哪个可以添加背景颜色?<bodybgcolor="yellow">6 . 请选择产......
  • 图片素描化
    去年暑假无聊搞的小项目#include<graphics.h>#include<conio.h>#include<stdio.h>#include<iostream>usingnamespacestd;intwidth,hight;IMAGEphoto1;constintN=2000,M=2000;//Warning!!!:changethisnumbertomatchthepictureCOLORRE......
  • Topaz Photo AI:用AI技术,提升图片品质 mac/win版
    TopazPhotoAI是一款基于人工智能技术的图片优化软件,它能够帮助摄影师们对图片进行自动优化,使其更加美丽和生动。点击获取TopazPhotoAI首先,TopazPhotoAI具有非常强大的自动优化功能。它能够根据图片的内容和场景,自动调整图片的曝光、对比度、白平衡、色调等等参数,使其更加......
  • HTML-列表标签
    列表标签列表是用来布局的列表最大的特点是就是整齐,整洁,有序,它作为布局会更加自由和方便根据使用情景不同,列表可以分为三大类:无序列表,有序列表,和自定义列表无序列表<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义<ul>......
  • numpy 保存图片
    #!/usr/bin/envpython#coding:utf-8importnumpyasnpfromPILimportImage#im=Image.open('pic/cat.jpg')#im.show()#im.save("pic/cat.png")defsave_pic_np():im=Image.open('pic/cat.jpg')m=np.array(im......
  • 驾驶舱看板首页图片第三版
    指标字典: 嵌入后台: BI小知识: 嵌入后台1: ......
  • uniapp app上传图片并设置超过10m进行图片压缩
    组件页面<template>   <viewclass="upload-wrapper">      <viewv-if="pictureUrl.length">         <viewclass="preview"v-for="(item,index)inpictureUrl":key='index'>        ......
  • v-html 中的样式覆盖
    v-html里的内容样式如果直接在style里覆盖样式,不生效。需要样式穿透才行<template><divv-html="goodDetails.introduction"class="introduction"></template><stylelang="scss"scoped>.introduction/deep/img{ width:100%......
  • webpack的html模板中插入变量写法
    vue-cli文档中的描述如下Index文件#public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中,资源链接会被自动注入。另外,VueCLI也会自动注入resourcehint(preload/prefetch、manifest和图标链接(当用到PWA插件时)以及构建过程中处理的Ja......