- 博客(37)
- 收藏
- 关注
原创 文字滚动在ios设备不生效
设置顶部区域滚动时,安卓和pc上都可以正常滚动显示,ios上效果失效。引入的图片是静态区域的图片,所以要用require引入图片路径。以下代码主要是实现区域的布局,文字滚动用到的是。滚动区域是图片加文字的组合,用数组循环出来的。
2024-09-03 08:51:36 497
原创 根据图片的宽高比例来控制图片的显示效果
遇到问题:后台获取的图片宽高不定,有可能宽大于高,也有可以高大于宽,这时候设置objec-fit时就会不稳定,控制一方显示了,另一方的图片就可能显示的效果不是我们想要的,特别是人物的时候,比如我有一个宽大于高的div盒子,需要在盒子内显示后台传入的人物图片(图片是后台获取的),当后台传入和我一样宽大于高的盒子时,我设置objec-fit:cover;:保持宽高比例不失调的情况下可以把人物脑袋显示出来,会比上面效果好一些,但仍不是最优方案,主体有点太靠顶显示,根据宽高对比添加naturalWidth类样式。
2024-08-30 16:14:37 163
原创 盒子颜色由深变浅
js部分主要设置opacities透明度来实现盒子由深变浅,array为循环的数组。再设置行内样式:让盒子颜色由深到浅,主要通过设置透明度实现,数组中的五个值来循环为它们设置不透明度。数组有无限多的元素,你也总是能够使用。设置盒子正常大小及其他样式,的使用是为了确保索引值。这样,你就可以确保即使。
2024-06-28 10:41:58 203
原创 类似qq空间图片布局:一个图片撑满整行;两个图片,两个并排方形显示;三个及以上,一行方形显示三个,九个以上,最后一张图片上方显示剩余图片数量
imgIndex === displayImages(item.handbookImages).length - 1,它是用来判断只在最后一个图片上方显示剩余图片数量样式,不加的话,所有图片上方都会显示剩余图片数量。displayImages(item.handbookImages)是方法,传入数据,会在js部分有处理。做动态样式,用于判断当前数组中的图片是几张,下面是css代码。以上仅部分代码,逻辑是通的,data数据和获取接口数据省略。
2024-06-12 15:50:16 287 1
原创 用js在给定的多个盒子中,动态的显示多个星星
document.addEventListener('DOMContentLoaded', function () {} 是为了监听DOMContentLoaded事件,当html文档解析完成会触发DOMContentLoaded,可去掉,也可换其它。
2024-04-30 11:32:16 149
原创 css预处理器
css预处理器定义了一种新的语言,主要是通过用一种专门的编程语言,为css添加一些编程特性,再编译生成css文件。可以帮助我们编写可维护的、与时俱进的代码,减少需要编写的CSS数量,对于那些需要大量和样式规则的大型用户界面是非常有帮助的。
2024-03-24 17:08:18 418
原创 响应式布局(flex布局,rem布局,流式布局,vw / vh)
弹性盒子是CSS3的一种新布局模式,当页面需要适用不同的屏幕大小或者设备类型时确保元素拥有恰当的行为的布局方式。对一个容器中的子元素进行排列、对齐和分配空白空间。父容器属性定义为display:flex,表示该元素内部时弹性盒子布局flex-direction 属性决定主轴的方向(即子元素的排列方向)flex-wrap 设置弹性盒子的子元素超出父容器时是否换行align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
2024-03-21 16:51:25 1038
原创 vue组件通信
父向子通过props子向父 $emit触发自定义事件ref 通信兄弟组件通信 EventBus$parent或$childrenvuex。
2023-03-23 11:11:08 70
原创 $router和$route的区别,v-if和 v-for,v-show
$router和$route的区别,v-if和 v-for为什么要避免结合使用,v-show和v-if的异同
2022-07-25 20:27:21 505
原创 深拷贝和浅拷贝
如果有循环就会堆栈溢出,解决把处理好的对象先存起来,在处理新的对象的时候,先在这个存的地方找找有没有处理好,处理好就返回。1.使用JSON.parse(JSON.stringfy(obj)),但使用它是有缺点的,对象有方法的时候,方法会丢失。浅拷贝使用Object.assign({},obj)或{...obj}2.对象有方法的时候,可以使用递归。深拷贝对象有多层,比如一个对象的属性还是对象。浅拷贝如果对象只有一层,使用浅拷贝。......
2022-07-25 14:34:03 60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人