实战
夜码狂农
这个作者很懒,什么都没留下…
展开
-
CSS开发技巧(五):妙用padding实现元素的高度和宽度保持比例
在前端开发中,我们可能需要实现一定的适配,其中常见的一个需求是:元素保持高宽比,等比例进行缩放。思路分析现在,我们来分析这一需求:由于需要缩放,宽度和高度都不能写成固定值。要保持高宽比,元素的高度和宽度中有一个属性需要根据另一个属性计算得到,那么先确定高度还是宽度呢?显然,应该先确定宽度。我们的前端开发中一般对于页面高度不会有过多的要求,相比而言宽度显得更为“珍贵”,因此应该先确定...原创 2020-02-29 14:17:57 · 1374 阅读 · 0 评论 -
JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas。所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen、exitFullScreen即可。但这两个api一般而言需要考虑其兼容性问题,那么就需要额外封装一下。笔者参考相关资料,结合自身实践,最终整理出以下封装函数,理念虽然没有特别之处,但这种封装的写法却属于一种微原创。以下经过...原创 2019-12-11 09:46:18 · 874 阅读 · 0 评论 -
原生JS设计轮播图
什么是轮播图? 比如淘宝首页这样:一、需求分析: 窗口:显示图片的固定位置,不管切换哪种图,始终在窗口中呈现。 1、切换按钮: 在窗口中,有两个固定的按钮,分别实现查看上一张图片和下一张图片的功能。 2、跳转按钮: 轮播窗口底部,有一排圆形按钮,点击对应按钮,将出现对应的图片,同时当前按钮高亮。如,点击第五个按钮,将出现第五张图片。 3、自动播放: 当鼠标不在窗口上时,自动轮播原创 2019-10-12 09:28:49 · 373 阅读 · 0 评论 -
CSS开发技巧(三):图片点击缩放
前言 利用CSS实现图片的点击缩放是一个很值得研究的效果。在某些业务需求场景中,我们可能并没有足够的空间展示过大的图片,这就需要限制图片容器的宽度和高度。然而图片限制了宽度,一些图片的细节便又无法看清。 实现这种需求的一种直观方式是固定图片宽高,然后提供点击缩放的功能。这是本文要讨论的要点。 需要额外说明的是,CSS实现业务需求的方式是灵活的,这与开发者的功底也是密切相关的,实现上述的业务需...原创 2019-10-13 13:57:56 · 6030 阅读 · 0 评论