新增第173个小实例：交互式图片鼠标悬停景深对焦效果

2022-07-19 17:31:35 +08:00 · 2022-07-19 17:31:35 +08:00 · 548ce3536e
parent a4520281df
commit 548ce3536e
10 changed files with 99 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -179,4 +179,5 @@
 169. HTML5+CSS3小实例：网页底部间隔波浪动画特效
 170. HTML5+CSS3+JS小实例：打散文字随机浮动特效
 171. HTML5+CSS3+JS小实例：带密码灯照射的登录界面
-172. HTML5+CSS3+Vue小实例：路飞出海的动画特效
+172. HTML5+CSS3+Vue小实例：路飞出海的动画特效
+173. HTML5+CSS3+JS小实例：交互式图片鼠标悬停景深对焦效果
--- a/code/173/173.css
+++ b/code/173/173.css
@ -0,0 +1,48 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口宽高 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 垂直排列 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.container{
+    width: 100%;
+    height: 160px;
+    /* 相对定位 */
+    position: relative;
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+.container div{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 绝对定位 */
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.container div img{
+    width: 110%;
+    height: 100%;
+    /* 对图片进行剪切，保留原始比例 */
+    object-fit: cover;
+    /* --offset（水平偏移量）、--blur（模糊度 数值越大越模糊）是CSS的自定义属性，可通过var函数进行调用 */
+    --offset: 0px;
+    --blur: 2px;
+    /* 设置水平偏移量 */
+    transform: translateX(var(--offset));
+    /* 设置模糊度 */
+    filter: blur(var(--blur));
+}
+h3{
+    margin-top: 25px;
+}
--- a/code/173/173.html
+++ b/code/173/173.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>交互式图片鼠标悬停景深对焦效果</title>
+    <link rel="stylesheet" href="173.css">
+</head>
+
+<body>
+    <div class="container">
+        <div><img src="/images/173/1.png" alt=""></div>
+        <div><img src="/images/173/2.png" alt=""></div>
+        <div><img src="/images/173/3.png" alt=""></div>
+        <div><img src="/images/173/4.png" alt=""></div>
+        <div><img src="/images/173/5.png" alt=""></div>
+        <div><img src="/images/173/6.png" alt=""></div>
+    </div>
+    <h3>请在图片上左右移动鼠标查看效果</h3>
+</body>
+
+</html>
+
+<script src="173.js"></script>
--- a/code/173/173.js
+++ b/code/173/173.js
@ -0,0 +1,23 @@
+// 要操作的元素
+const container=document.querySelector('.container');
+const imgs=document.querySelectorAll('.container img');
+
+// 为容器绑定鼠标移动事件
+container.addEventListener('mousemove',function(e){
+    // e.clientX 鼠标指针相对于窗口的水平坐标
+    // window.outerWidth 窗口的外部宽度
+    let percent=e.clientX/window.outerWidth;
+    // 计算水平偏移量
+    let offset=10*percent;
+    let blur=20;
+
+    // 遍历图片
+    imgs.forEach((img,index)=>{
+        offset*=1.3;
+        // 计算模糊度
+        let blurValue=Math.pow(index/imgs.length-percent,2)*blur;
+        // 将计算好的值赋给CSS的自定义属性
+        img.style.setProperty('--offset',offset+'px');
+        img.style.setProperty('--blur',blurValue+'px');
+    })
+})
--- a/images/173/1.png
+++ b/images/173/1.png
--- a/images/173/2.png
+++ b/images/173/2.png
--- a/images/173/3.png
+++ b/images/173/3.png
--- a/images/173/4.png
+++ b/images/173/4.png
--- a/images/173/5.png
+++ b/images/173/5.png
--- a/images/173/6.png
+++ b/images/173/6.png