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 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JS一次前端面试经历记录
Mar 19 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
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
ipython和python区别详解
2019/06/26 Python
Python代码太长换行的实现
2019/07/05 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
大专生自我评价
2014/01/28 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技