专栏首页iOS开发干货分享JS+CSS 3实现图片滑块效果

JS+CSS 3实现图片滑块效果

原文地址:https://segmentfault.com/a/1190000023056917 原文作者:小豪

效果

分析该动画,可拆分成两个步骤:

  • 鼠标移入或者移出时,添加一个动画 class
  • 实现该动画 class,实现移入移出动画

图片瀑布流布局可参考 Vue 手写图片瀑布流组件(附源码)

HTML 和 CSS 布局

布局比较简单,一个父容器 ,里面一个 mask div,一个 img div

<div class="photo_item" style="max-width:200px;">
<div class="photo_mask"></div>
  <img src="http://photo.tuchong.com/2732846/ft640/20811104.webp">
</div>

布局,父容器设置 position: relative; 子 mask 容器设置 position: absolute;并撑满整个容器

编写动画 class,不妨让左滑入 class 为 enter_left,则左边动画可写为:

.enter_left {
animation: enter-left 0.3s ease-in;
}

@keyframes enter-left {
  0% {
transform: translate3d(-100%, 0, 0);
  }
  100% {
transform: translate3d(0, 0, 0);
  }
}

刚开始让 mask 置于父容器外,100%时刚好到达父容器右边界,同理很容易写出各个方向的 css 动画

JS 判断滑块方向

上一步我们已经完成了一大半,写出了各个方向的动画,难点是如何判断鼠标进入容器的方向

我们可以画图分析,如下图:

假设该矩形的中心点坐标为 x0(x0,y0),鼠标进出矩形的边界坐标点为 x(x,y)

根据斜率公式,可以得到:

  • l1 斜率:k0 = height/width
  • l2 斜率:-k0
  • l3 斜率:k=(y-y0)/(x-x0)

观察图形可知,l1 和 l2 把矩形分成了 4 个块,我们很容易得到:

若 鼠标从右边进出,根据斜率:k>=-k0 && k<=k0,且 x > x0;

根据对称性,若鼠标从左边进出,则:k>=-k0 && k<=k0,且x < x0;

......

开始写 js 逻辑,绑定鼠标移入移出事件

<div class="photo_item" style="max-width:200px;" @mouseenter="(event)=>imgEventHandle(event,true)" @mouseleave="(event)=>imgEventHandle(event,false)">
<div class="photo_mask"></div>
  <img src="http://photo.tuchong.com/2732846/ft640/20811104.webp">
</div>

注意:不要用 mouseout 和 mouseover 事件,该事件会导致鼠标滑入子元素时也触发鼠标事件

使用 event.target.getBoundingClientRect()获得当前鼠标的相信信息;

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象,返回的结果是包含完整元素的最小矩形,并且拥有 left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。

直接给出该部分逻辑代码

imgEventHandle(event: any, is_enter: boolean) {
let direction_index: number;
const direction_list: Array<string> = ['top', 'right', 'bottom', 'left'];
const x: number = event.clientX;
const y: number = event.clientY;
// 中点坐标
const rect_dom: any = event.target.getBoundingClientRect();
const x0: number = rect_dom.left + rect_dom.width / 2;
const y0: number = rect_dom.top + rect_dom.height / 2;
const k0 = (rect_dom.height) / (rect_dom.width);
// 当前鼠标点斜率
const k = (y - y0) / (x - x0);
if (k <= k0 && k >= -k0) {
// 左右进出
    direction_index = x >= x0 ? 1 : 3;
  } else {
// 上下进出
    direction_index = y >= y0 ? 2 : 0;
  }
  direction_list.forEach(item => {
    event.target.childNodes[0].classList.remove(`${is_enter ? 'leave' : 'enter'}_${item}`);
  });
  event.target.childNodes[0].classList.add(`${is_enter ? 'enter' : 'leave'}_${direction_list[direction_index]}`);
}

完整代码

<template>
<div style="max-width:1366px;margin:0 auto;">
<div class="photo_item" style="max-width:200px;" @mouseenter="(event)=>imgEventHandle(event,true)" @mouseleave="(event)=>imgEventHandle(event,false)">
<div class="photo_mask"></div>
<img src="http://photo.tuchong.com/2732846/ft640/20811104.webp">
</div>
</div>
</template>

<script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Vue, Component } from 'vue-property-decorator';

@Component({})
export default class Debug extends Vue {
// eslint-disable-next-line class-methods-use-this
  imgEventHandle(event: any, is_enter: boolean) {
let direction_index: number;
const direction_list: Array<string> = ['top', 'right', 'bottom', 'left'];
const x: number = event.clientX;
const y: number = event.clientY;
// 中点坐标
const rect_dom: any = event.target.getBoundingClientRect();
const x0: number = rect_dom.left + rect_dom.width / 2;
const y0: number = rect_dom.top + rect_dom.height / 2;
const k0 = (rect_dom.height) / (rect_dom.width);
// 当前鼠标点斜率
const k = (y - y0) / (x - x0);
if (k <= k0 && k >= -k0) {
// 左右进出
      direction_index = x >= x0 ? 1 : 3;
    } else {
// 上下进出
      direction_index = y >= y0 ? 2 : 0;
    }
    direction_list.forEach(item => {
      event.target.childNodes[0].classList.remove(`${is_enter ? 'leave' : 'enter'}_${item}`);
    });
    event.target.childNodes[0].classList.add(`${is_enter ? 'enter' : 'leave'}_${direction_list[direction_index]}`);
  }
}
</script>

<style lang="scss" scoped>
.photo_item {
  position: relative;
  break-inside: avoid;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 10px 10px 5px #ccc;
  &:hover {
    .photo_mask {
      z-index: 1;
    }
  }
  img {
    width: 100%;
  }
  .photo_mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    &.enter_top {
      animation: enter-top 0.3s ease-in;
    }
    &.leave_top {
      animation: leave-top 0.3s ease-out;
    }
    &.enter_right {
      animation: enter-right 0.3s ease-in;
    }
    &.leave_right {
      animation: leave-right 0.3s ease-out;
    }
    &.enter_bottom {
      animation: enter-bottom 0.3s ease-in;
    }
    &.leave_bottom {
      animation: leave-bottom 0.3s ease-out;
    }
    &.enter_left {
      animation: enter-left 0.3s ease-in;
    }
    &.leave_left {
      animation: leave-left 0.3s ease-out;
    }
  }
}
@keyframes enter-top {
  0% {
    z-index: -1;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-top {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes enter-right {
  0% {
    z-index: -1;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-right {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes enter-bottom {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-bottom {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes enter-left {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-left {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(-100%, 0, 0);
  }
}
</style>

本文分享自微信公众号 - web前端小剧场(webxiaojuchang),作者:小豪

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • DIV+JS+CSS实现点击弹出图片效果

    前几天扒了vue vlog的官网,想给添加一个像博客一样的点击微信图标弹出公众号二维码。

    AlexTao
  • JS实现图片弹窗效果

    中间磨磨唧唧从原生JS找到JS插件,浪费了不少精力和时间,但是也磕磕碰碰学到了些知识,建议读者:想学一下弹窗的JS实现代码的可以看看前两小节,只想实现效果的,直...

    浩Coding
  • CSS实现鼠标滑过卡片上浮效果

    代码实现: 在 hover 状态增加了 transition 属性,从而产生渐变的效果。

    文渊同学
  • CSS中鼠标滑过图片放大效果

    刚刚看了下感觉还不错,纯CSS实现,虽然在开发主题时CSS3用的比较少。这是一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示...

    开心分享
  • 纯CSS实现Logo图片扫光效果

    德顺
  • 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: ...

    用户1149564
  • 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间。不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和C...

    奔跑的小鹿
  • 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间。不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和C...

    奔跑的小鹿
  • js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路,希望对大家有用。先贴效果吧:

    lzugis
  • CSS实现图形效果

    CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。

    WindrunnerMax
  • jQuery 插件

    jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。

    星辰_大海
  • js实现图片3D轮播效果(收藏)

    何处锦绣不灰堆
  • jQuery 插件

    jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入

    清出于兰
  • 纯CSS实现照片墙效果

    AlbertYang
  • 简单、通用的JQuery Tab实现

    网页上的空间是寸土寸金,虽然显示器的分辨率越来越大,可是直到今天,网页设计中仍然是以至少1024×768 像素的支持为主,也就是说,每一屏页面只有区区 955×...

    小李刀刀
  • CSS实现图片悬停文字叠加效果

    在这篇文章中,我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程,你必须具备充分的 HTML 和 CSS 基本知识。

    @零一
  • Android使用ViewPager实现图片滑动预览效果

    本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码,供大家参考,具体内容如下

    砸漏
  • css+js实现左右滑动卡片组件

    最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

    郭诗雅
  • Swiper开篇

     swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,

    用户3159471

扫码关注云+社区

领取腾讯云代金券