Posted in Javascript onAugust 25, 2020
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
JS实现拖动模糊框特效
- Author -
hthththtt声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@