JS实现拖动模糊框特效


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了JS实现拖动模糊框特效的具体代码,供大家参考,具体内容如下

需求:

在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下角文字时,文字隐藏。

技术:

监听器,鼠标坐标获取

效果图

JS实现拖动模糊框特效

源码分享:

HTML

<h1>Image Comparison Slider</h1>
 <nav>
<!--底层图--> <img src="img/img-original.jpg" alt=""> 
<!--蒙版使用背景图--> <div id="img">
   <h3 id="leftBottom">Modified</h3>
<!--拖动按钮--> <button id="btn">
    <span class="iconfont icon-zuojiantou"></span>
    <span class="iconfont icon-youjiantou"></span>
   </button>
  </div>
  <h3 id="rightBottom">Original</h3>
</nav>

CSS样式

<style>
  * {
   margin: 0;
   padding: 0;
   color: #E8F6F5;
  }
  body {
   background-color: #566B89;
   padding-top: 1px;
  }
  nav {
   width: 1200px;
   height: 675px;
   overflow-x: hidden;
   position: relative;
   margin: 100px auto 0;
  }
  h1 {
   text-align: center;
   margin-top: 100px;
   font-weight: 400;
  }
  nav>img {
   position: absolute;
  }
  #img {
   width: 600px; /*初始状态显示一半蒙层*/
   height: 675px;
   background: url("img/img-modified.jpg"); /*这里容器大小与图片一致,若想改变大小,设置背景大小属性 background-size: 图片宽 图片高;*/
   position: relative;
   animation: start 1s ease-in-out;
  }
  #img img {
   width: 100%;
   height: 100%;
  }
  @keyframes start {
   0% {
    width: 0;
   }
   50% {
    width: 650px;
   }
   100% {
    width: 600px;
   }
  }
  #btn {
   position: absolute;
   right: -25px;
   top: calc(50% - 25px);
   width: 56px;
   height: 56px;
   line-height: 56px;
   border: none;
   outline: none;
   border-radius: 50%;
   background-color: pink;
   font-size: 0;
   text-align: center;
   color: white;
   cursor: pointer;
  }
  .iconfont {
   font-size: 20px;
  }

  h3 {
   font-weight: 400;
   color: white;
  }
  #leftBottom,#rightBottom {
   position: absolute;
   width: 100px;
   bottom: 50px;
  }
  #leftBottom {
   left: 50px;
  }
  #rightBottom {
   right: 50px;
  }
</style>

JS部分

<script>
  let img = document.querySelector("#img");
  let btn = document.querySelector("#btn");
  let nav = document.querySelector("nav");
  let leftBottom = document.querySelector("#leftBottom");
  let rightBottom = document.querySelector("#rightBottom");
  btn.onmousedown = function (e) {
   let clientx = e.clientX; // 点击获取鼠标初始X坐标
   nav.onmousemove = function () {
    let e = arguments[0] || window.event;
    let X = e.clientX; // 移动时获取鼠标移动时的X坐标
    let imgW = parseInt(getComputedStyle(img,null).width);
    img.style.width = `${ imgW + X - clientx}px`; // 图片宽度 = 移动时的X坐标 - 点击时的初始坐标 也就是 图片宽度 + 鼠标X坐标的偏移量
    clientx = X ; // 将最新的位置的X坐标 赋值给 点击初始坐标 也就是 更新 X坐标初始值
    if (imgW < 150){
     leftBottom.style.display = "none";
    }else {
     leftBottom.style.display = "block";
    }
    if (imgW > 1050){
     rightBottom.style.display = "none";
    }else {
     rightBottom.style.display = "block";
    }
   }
  };
  document.onmouseup = function () {
   nav.onmousemove = null;
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
cssQuery()的下载与使用方法
Jan 12 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
vue中监听返回键问题
Aug 28 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
PHP读取远程txt文档到数组并实现遍历
Aug 25 #Javascript
JS轮播图的实现方法2
Aug 25 #Javascript
JS轮播图的实现方法
Aug 24 #Javascript
js 函数性能比较方法
Aug 24 #Javascript
JavaScript实现简单验证码
Aug 24 #Javascript
JavaScript经典案例之简易计算器
Aug 24 #Javascript
原生js实现拖拽移动与缩放效果
Aug 24 #Javascript
You might like
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python datetime中strptime用法详解
2019/08/29 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
如何提高MySql的安全性
2014/06/19 面试题
腾讯广告词
2014/03/19 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2014年导购员工作总结
2014/11/18 职场文书
数学教师个人总结
2015/02/06 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python