位置: IT常识 - 正文

【Vue】图片拉近、全屏背景实战经验总结(vue图片点击放大)

编辑:rootadmin
【Vue】图片拉近、全屏背景实战经验总结 文章目录1 图片拉近2 全屏背景2.1 background-attachment2.2 background-size2.3 display:flex;2.4 flex-direction2.5 100vh1 图片拉近

推荐整理分享【Vue】图片拉近、全屏背景实战经验总结(vue图片点击放大),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue图片怎么设置速度,vue图片怎么设置速度,vue图片怎么设置速度,vue 图片 拖拽 缩放,vue 图片 拖拽 缩放,vue怎么实现图片懒加载,vue图片移动,vue怎么让照片放慢一点,内容如对您有帮助,希望把文章链接给更多的朋友!

缘起是看到了下面的图片,我发现当鼠标悬浮的时候,发现他是可以拉近的,也就是图片的宽高不变,但是图片被放大了

起初我以为是有一个这样的方法,可以实现这个操作,但是查找了很多网站都没有找到。

后来自己慢慢的摸索,才了解了其中的奥妙

子盒子和父盒子的大小一样大,为了能体现出父子盒子,我让父盒子略大,并未黄色,子盒子为白色

当鼠标悬浮到该子盒子的时候,子盒子被放大(scale),如下图

同时,我设置子盒子超出父盒子的部分隐藏(overflow:hidden),这样我只能看到黄色部分,但是图片却被放大了,就看到了最初的效果,图片好像被拉进了

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="mystyle.css"/></head><body><div class="div1"><img src="../作业2/images/5.jpg" class="div2"></div></body><style type="text/css">.div1{margin-top: 50px;margin-left: 50px;height:400px;width: 400px;border: 1px solid red;overflow: hidden;} .div2{ width: 400px; height: 400px; background-color: #0000FF; cursor: pointer; } .div2:hover{ transform: scale(2); }</style></html>

这样似乎太突兀了,我们加一个实现的时间 1s transition: 1s;

这样就舒服多了

写这一篇博客,我发现这个图片功能太简单了。我自己用vue做的时候,用的是@mouseover @mouseout 需要两个方法

让其有1s动画效果的时候,我用的是根据类名获取元素,然后鼠标悬浮的时候给他加上动画的效果。

但是动画的效果默认是不会保存的,间隔一秒后又会回到初始化的状态,所以又加了一句animation-fill-mode:forwards,让其保持动画的状态。

写这篇博客之后,原来只需要几行代码就解决了!

2 全屏背景<template> <div id="app"> </div></template><script>export default { name: 'App',}</script><style>body { margin: 0; background: #e8e8e8 url('@/assets/oprea_background02.png') center bottom; /* 设置背景图片会不会随着屏幕滚动 */ background-attachment: fixed; /* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */ background-size: cover; /* 去掉好像也没什么 */ display: flex; /* 设置height:100vh,能够保证元素无论是否有没有内容,高度都等于屏幕高度。 */ min-height: 100vh; flex-direction: column;}</style>

2.1 background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

【Vue】图片拉近、全屏背景实战经验总结(vue图片点击放大)

scroll就是说,这个背景图片不是固定的,会随着页面高度的改变而变

fixed意味着,图片是固定的,不会随着页面高度的改变而改变

值描述scroll背景图片随着页面的滚动而滚动,这是默认的。fixed背景图片不会随着页面的滚动而滚动。local背景图片会随着元素内容的滚动而滚动。initial设置该属性的默认值。inherit指定 background-attachment 的设置应该从父元素继承。2.2 background-size值描述length设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)percentage将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。2.3 display:flex;

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

不加display:flex

加上display:flex

还是挺有用的以前一直用,float:left,float:right解决布局,现在又学到了一个方法。

2.4 flex-direction

flex-direction 属性规定灵活项目的方向。

**注意:**如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

本来是按行排序的,flex-direction可以灵活的排序,可以按列排序,也可以按行反着来 一些效果如下:

2.5 100vh

vh就是当前屏幕可见高度的1%,也就是说

height:100vh == height:100%;

但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,

但是设置height:100vh,该元素会被撑开与屏幕高度一致。

对比

100%

100vh

本文链接地址:https://www.jiuchutong.com/zhishi/297833.html 转载请保留说明!

上一篇:CVPR2023论文速递(2023.3.22)!已接入ChatGPT总结!共31篇!(cvpr2021论文列表)

下一篇:pytorch如何搭建一个最简单的模型,(pytorch如何搭建神经网络)

  • iphone如何看拦截短信(苹果手机如何查看拦截)

    iphone如何看拦截短信(苹果手机如何查看拦截)

  • 快手新版金币在哪里找(快手新版金币在哪里兑换)

    快手新版金币在哪里找(快手新版金币在哪里兑换)

  • 雪容融在哪里可以买到(雪容融的资料)

    雪容融在哪里可以买到(雪容融的资料)

  • 新浪微博私信添加的附件数量和大小有限制吗(新浪微博私信添加怎么弄)

    新浪微博私信添加的附件数量和大小有限制吗(新浪微博私信添加怎么弄)

  • 苹果18w快充响几声(iphone18w快充响几声)

    苹果18w快充响几声(iphone18w快充响几声)

  • 3d删除快捷键是什么(3d删除键没反应)

    3d删除快捷键是什么(3d删除键没反应)

  • 手机突然不能录音了(手机突然不能录屏了)

    手机突然不能录音了(手机突然不能录屏了)

  • 电脑钉钉直播有延迟怎么办(电脑钉钉直播有声音没画面)

    电脑钉钉直播有延迟怎么办(电脑钉钉直播有声音没画面)

  • a1701是什么版本(a1708是什么型号)

    a1701是什么版本(a1708是什么型号)

  • ipadmini在哪插内存卡(ipad mini4在哪里插卡)

    ipadmini在哪插内存卡(ipad mini4在哪里插卡)

  • 在ipv4中,c类二进制形式的ip地址前3位为(ipv4中的c类地址)

    在ipv4中,c类二进制形式的ip地址前3位为(ipv4中的c类地址)

  • 华为mate30pro怎么截屏幕图(华为mate30pro怎么升级鸿蒙系统)

    华为mate30pro怎么截屏幕图(华为mate30pro怎么升级鸿蒙系统)

  • 11promax双卡双待吗(ipone11promax 双卡双待)

    11promax双卡双待吗(ipone11promax 双卡双待)

  • 苹果x屏幕换tp是什么意思

    苹果x屏幕换tp是什么意思

  • 三星s10是双卡双通么(三星s10是双卡双待手机吗)

    三星s10是双卡双通么(三星s10是双卡双待手机吗)

  • 苹果手机怎么没声音了显示耳机(苹果手机怎么没有通话记录)

    苹果手机怎么没声音了显示耳机(苹果手机怎么没有通话记录)

  • 笔记本电池鼓包会炸吗(笔记本电池鼓包能刺破放气吗)

    笔记本电池鼓包会炸吗(笔记本电池鼓包能刺破放气吗)

  • 华为p30什么时候上市(华为p30什么时候出产的)

    华为p30什么时候上市(华为p30什么时候出产的)

  • 最右如何屏蔽私信(最右怎么屏蔽所有人私信)

    最右如何屏蔽私信(最右怎么屏蔽所有人私信)

  • cad捕捉设置快捷键(cad2012捕捉设置快捷键)

    cad捕捉设置快捷键(cad2012捕捉设置快捷键)

  • Linux下用gzip和unzip命令来压缩和解压文件的用法(linux中gzip的用法)

    Linux下用gzip和unzip命令来压缩和解压文件的用法(linux中gzip的用法)

  • Win10 1809 17763.2268 更新发布:附更新修复内容汇总

    Win10 1809 17763.2268 更新发布:附更新修复内容汇总

  • fssm32.exe是什么进程 有什么作用 fssm32进程查询

    fssm32.exe是什么进程 有什么作用 fssm32进程查询

  • 孚日山脉上的国王城堡,法国阿尔萨斯 (© Leonid Andronov/Shutterstock)(孚日山脉猞猁)

    孚日山脉上的国王城堡,法国阿尔萨斯 (© Leonid Andronov/Shutterstock)(孚日山脉猞猁)

  • 基于骨骼关键点的动作识别(OpenMMlab学习笔记,附PYSKL相关代码演示)(基于骨骼关键点的动作识别)

    基于骨骼关键点的动作识别(OpenMMlab学习笔记,附PYSKL相关代码演示)(基于骨骼关键点的动作识别)

  • 注册会计师考试时间2023
  • 油费补贴计入什么科目
  • 小规模纳税人税率2023年是多少
  • 商贸公司运输发票怎么开
  • 自行研发的无形资产会计处理
  • 三方协议怎么入账
  • 利息收入交税会计分录怎么做
  • 补偿款开具发票
  • 城建税和教育费附加的计税依据是什么
  • 案例分析工程发票进项高于销项怎么抵扣?
  • 如何开具红字专用发票信息表
  • 税种认定登记流程
  • 地价计入房产原值乘70%
  • 土地+n
  • 已抵扣发票如何查询开票明细
  • 新办企业注册资本和投资总额
  • 个人所得税征收计算方法
  • 同一控制下企业合并权益抵消
  • 网上申报附加税怎么报
  • 代缴社保缴费基数是怎么算的
  • 办公家具折旧年限及计算方法
  • 临时工工资怎么处理
  • 连续亏损的公司还要去吗
  • 个体户需要交钱吗
  • 固定资产报废怎么处理
  • php中如何使用session
  • fxssvc.exe
  • 在企业所得税前扣除的有哪些
  • lsm.exe是什么程序
  • php封装接口
  • 花卉绿萝的养殖方法
  • 贷款滞纳金如何收取
  • 哈雷6号
  • laravel执行seed命令
  • 固定资产清理税务处理
  • php数组内容替换
  • php pdo sqlserver
  • 普通纳税人怎么交税
  • 数据挖掘的四种基本方法
  • dnf指令键&怎么设置
  • 命令行 压缩
  • 银行回单箱费会退回吗
  • phpstudy配置php环境变量
  • 未开票收入缴纳增值税做账
  • db2udb
  • 转回存货跌价准备的会计分录
  • 付国外专利费用需办什么手续
  • mysql备份数据
  • 公司支付宝账户怎么管理
  • 理财产品怎么收费
  • 公司模具部制作工作内容
  • 不符合资本化的长期借款利息计入什么科目
  • 长期待摊费用如何评估
  • 预付款开了增值税专票怎么办
  • 欠钱打官司后利息怎么算
  • 哪些项目的进项可以抵扣
  • 收到技术服务费计入什么科目
  • ubuntu安装超详细教程
  • win10怎么查看windows版本
  • xp软件自动启动
  • ubuntu20.10
  • XP系统怎么安装打印机
  • win8关机一直转圈
  • 苹果官网入口
  • number mac
  • win7系统桌面不能新建文件夹
  • win7启动发生异常i/0错误
  • css划动
  • unity开发的小游戏
  • jquery实现页面切换
  • 原生js import
  • android toast位置
  • jquery属性选择器,选取所有带href
  • 圣诞树代码html
  • python3.5升级
  • Android调用系统摄像头
  • 四川省网上税务局申报流程
  • 煤炭资源税税率是多少啊
  • 广东省职称证书编号查询系统
  • 地税服务费算什么科目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设