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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP SQLite类
2009/05/07 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
js实现随机点名
2021/01/19 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python编写爬虫小程序
2015/05/14 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python中format()格式输出全解
2019/04/12 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
电力安全事故反思
2014/04/27 职场文书
2015年三万活动总结
2015/03/25 职场文书
六年级情感作文之500字
2019/10/23 职场文书