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 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
js表单验证实例讲解
Mar 31 Javascript
jQuery的框架介绍
May 11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
基于JavaScript实现留言板功能
Mar 16 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
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
咖啡的化学
2021/03/03 咖啡文化
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
js不是基础的基础
2006/12/24 Javascript
新浪的图片新闻效果
2007/01/13 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python 除法小技巧
2008/09/06 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python实现年会抽奖程序
2019/01/22 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
几个Linux面试题笔试题
2016/08/01 面试题
恒华伟业笔试面试题
2015/02/26 面试题
店长岗位职责
2013/11/21 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
分公司经理任命书
2014/06/05 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
追悼会答谢词范文
2015/09/29 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript