JS
文章平均质量分 95
游坦之
凡物之骤为之而追成焉者,其器小也;物之一览而易尽者,其中无有也。
展开
-
Vue复刻华为官网(三)
如上图,这整个的大盒子,又可以被分为上中下三个小盒子,上、下盒子都被分为左右两个小盒子。这部分的难点主要体现在搜索栏上,特别是搜索栏聚焦的时候,会有一个阴影的效果,失去聚焦之后阴影效果会消失。如下这部分可以使用两个鼠标事件搞定,@focus (组件获取焦点的时候触发)、@blur (组件失去焦点的时候触发)。当事件被触发的时候,操作Dom,更改组件的样式,从而达到想要的效果。另外一个难点就是下盒子右侧图标,在悬浮的时候会更改颜色,如下。这部分我直接是写了两个svg,通过一个字段的T/F,来控制这两个显隐原创 2022-10-30 07:46:27 · 7281 阅读 · 98 评论 -
Vue复刻华为官网 (二)
看了这个gif后,可以清楚的看到产生了三个动画效果:图片"拉近","了解更多"从下往上显示出来,阴影。我看了华为官网的源代码,发现图片本身就是有一个mask的,这样能让图片看起来暗一些,也就意味着,当鼠标进入的时候,只需要让mask的背景颜色更深一些,就实现了阴影的效果。至于图片"拉近",我早就写过了,无非是把图片放大,然后超出盒子的不显示,这个也容易。但了解更多显现,难度就大了一些。我想了很久,最后只有通过位置,来把"了解更多"显示出来,想过用visibility: visible;但效果不太好,也想过用原创 2022-10-25 19:09:54 · 13777 阅读 · 124 评论 -
Vue复刻华为官网 (一)
根据华为网页的布局,我们大体上可以将其划分为7个盒子,如下,由于写一个这样的网页再加上部分动态效果,需要的时间很长,本篇博客只记录了div1、div2、div3的静态效果+轮播图的实现。想要实现的正是最上部那个黑色的圆框我的思路很简单,用四个盒子,其中最大的盒子也就是整个黑色框,大盒子里面包裹着小盒子,每个小盒子对应一个字段(集团网站、选择区域/语言、登录),排版布局,则需要三个小盒子,依次向左浮动(float:left;)。或者大盒子单独采用display:flex;布局我看了一下华为公司的代码,他是用的原创 2022-10-21 10:29:54 · 9756 阅读 · 74 评论 -
【Vue】悬浮窗和聚焦登录组件经验总结
本文整理了实现悬浮窗以及聚焦登录组件的功能。 为的是方便大家和自己的学习。 省流:可以只看1.2 和 2的代码即可现在各大流行视频网站的平台都在使用这种悬浮显示的效果,我就想这种东西是怎样搞出来的呢!几经尝试,终于找到了一个实现方式,记录一下自己的开发历程,方便以后的使用,也为了各C友提供便利。尝试用display实现,利用display:none和block的切换,来实现悬浮窗的显示/关闭。把方法加在div1(悬浮窗)、div2(带图片背景的组件)共同的父组件div上,这样可以实现悬浮窗的效果但原创 2022-10-12 11:36:18 · 7229 阅读 · 114 评论 -
【Vue】Axios详解
浅显易懂,亲身体验,保证可以即使如新手也可以正确的使用Axios原创 2022-10-08 12:04:20 · 11237 阅读 · 120 评论 -
【Vue】图片拉近、全屏背景实战经验总结
写这一篇博客,我发现这个图片功能太简单了。我自己用vue做的时候,用的是@mouseover @mouseout 需要两个方法让其有1s动画效果的时候,我用的是根据类名获取元素,然后鼠标悬浮的时候给他加上动画的效果。但是动画的效果默认是不会保存的,间隔一秒后又会回到初始化的状态,所以又加了一句animation-fill-mode:forwards,让其保持动画的状态。写这篇博客之后,原来只需要几行代码就解决了!原创 2022-09-27 21:30:23 · 3142 阅读 · 99 评论 -
【JS】大道至简---来看看JS中你最熟悉的变量和数值的知识吧
js通过var来声明变量,var是一个JS关键字,用来声明变量(Variable变量的意思),使用该关键字声明变量后,计算机会自动会变量分配内存空间,不需要程序员管。程序员只需要通过变量名获取数据。计算机会为age分配一个空间,而程序员则可通过age拿到3的数据。不同数据占据的空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。原创 2022-09-24 19:54:46 · 842 阅读 · 56 评论 -
【Js】JS的历史:认识JS的来龙去脉
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。它是一种与平台和语言无关的应用程序接口API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。JS的书写位置有三种,分别为行内式,内嵌式,和外部式。原创 2022-09-24 11:29:14 · 1703 阅读 · 31 评论