jQuery index() 方法浅析

定义w3cschool 的定义:index() 方法返回指定元素相对于其他指定元素的 index 位置。(定义有误,结论会有说明)测试偶然的机会,在给 a 标签设置类样式,点击需要切换选中样式,发现 $('.group-a').index() 获取到的索引值竟然是从 1 开始的。这与我之前的认知不符,一般索引都是从 0 开始的。之前在做官网首页 tab 切换的时候,也接触过这个方法。功能点是点击

- 阅读全文 -

px、em、rem 的区别介绍

前言之前对这三个字体大小单位只有一个模糊的印象,px 是像素大小,相对固定,适用于 PC 端;em 和 rem 是相对大小,适用于不同尺寸规格的移动端。最近改移动端页面,发现自己定义的 rem 大小与设计图相差甚远。蓝湖设计图上标注的是 px,而我使用的是 rem。而且因为最小字体设置为 12 px,有些时候看到的字体效果并不是实际展示大小。每次自己去用眼睛去评估大小是否合适,没有一个切实可行的解

- 阅读全文 -

图片资源加载失败,报错:net::ERR_CERT_COMMON_NAME_INVALID 问题解决

今天产品告知列表页有些图片加载不出来,让我处理一下。一开始以为是列表图片没有设置,检查发现有判断图片是否设置,还设置了默认展示的图片。之后怀疑是图片资源过期或者不存在了,拿到相关图片的 src 值访问,发现访问正常,图片可以正常显示。并且因为图片服务器没有设置防盗链服务,所以也不会因为这个原因而加载失败。网上寻找解决方案,得到这个错误的解释是 用一个错误的域名访问了某个节点的 https 资源。其

- 阅读全文 -

destoon 打印 web 页面代码解析

公司官网改版之前,行情和资讯详情中的一些 js 方法都是可以使用的,改版之后发现按钮点击无效。检查了方法所在文件有引入,方法本身也有被调用(console.log 测试)。分析具体的代码发现,按钮点击没有生效,是因为方法本身还关联了 DOM 元素。比如某些功能涉及到提交表单,而表单内容是动态添加到 DOM 文档中的,这时如果之前的 ID 元素不存在了,方法自然就不生效了。详情页面的打印功能也是如此

- 阅读全文 -

JS 实现倒计时时间(天数、时、分、秒)

JS 要实现页面倒计时时间效果,主要用到三个函数,一个是 JS 的日期对象 new Date(),一个是 JS 的取整函数 parseInt,最后是一个定时器 setInterval()。如果输入参数为计算好的倒计时时间戳(秒或者毫秒),则日期对象也可以省略。实现过程大致分为三步:首先是计算输入的时间戳与当前时间的差值(单位:毫秒)。如果输入参数即为差值本身,可以忽略这一步。这里分几种情况:输入参

- 阅读全文 -

div 使用 height、width 调节宽度、高度不起作用

遇到一怪事,存在一个 div,想要通过 height 调节高度发现不起作用。height 本身也没有被强制覆盖。尝试添加 max-height 属性定义也没有用,没有设置内距和外距,box-sizing 自然也不起作用。好奇到底是定义了什么奇怪属性,便 F12 打开调试窗口,一番波折终于找到了作乱元凶:display: table-cell;这属性值好像自带光环效果,什么技能都对它都不起作用,将其

- 阅读全文 -

border-radius 使用之左上、左下、右上、右下分别定义

border-radius 字面意思就是边框的半径长度,即定义元素四个角的设置圆角边框。一般情况下,会直接定义 border-radius 的值。跟其他属性如 margin 、padding 之类一样,border-radius 其实也可以定义四个值,分别表示左上角,右上角,右下角,左下角的圆角半径。border-radius: 2rem;等价于border-top-left-radius: 2e

- 阅读全文 -

如何让轮播图在高度固定、宽度100%、不同分辨率的情况下固定宽高比,居中显示

最近被公司当前端使了,没办法,小公司招不到也不愿高薪招前端,只能我这个后台顶上去。遇到如标题一样的问题,首页轮播图在不同的分辨率下会发生变形。这是因为图片被设置了 100% 宽度和固定高度。分辨率发生变化时,宽度会拉升或者收缩,而高度固定,图片本身宽高比会失衡,变形在所难免。一开始想到可以将图片设置为背景,然后图片居中展示。但这样改动太大,因为轮播图部分使用了 destoon 的广告位,外面包裹

- 阅读全文 -

自定义 iconfont 显示不出来或显示小框框

首先参考之前写过的 加载使用 iconfont 阿里巴巴矢量图标库 和 自定义 iconfont 字体图标 这两篇关于 iconfont 的文章,主要使用 font-class 方式引用 iconfont 字体图标。具体引用步骤参考 自定义 iconfont 字体图标,之前使用 FontCreator 软件进行自定义 iconfont 编辑的,就是用 FontCreator 打开 ttf、otf

- 阅读全文 -

PC 端侧边快捷导航栏的实现原理解析

对于一些首页需要展示较多品类的 PC 端商城,靠着主体内容的侧边导航栏是必不可少的。公司官网也用到了这个组件,参考天猫、震坤行、工品汇等网站做了些代码对比解析。侧边快捷导航栏的定位布局因为要固定在屏幕的某个位置,所以布局定位第一个想到的是 position:fixed,工品汇和天猫 PC 网站用的就是 fixed 布局。fixed 可以让组件相对于屏幕进行定位,而不是像 absolute 相对于

- 阅读全文 -

热门文章

最新文章

分类

其它