实力科普:为什么浮层或弹框一定要有叉叉关闭按钮?

2018年07月14日 by 张 鑫旭 阅读 10446 次, 今日 12 次

之前自己发了个安利LuLu UI组件的微博,其中有位同行对于弹框组件提了这么一个问题:大佬,这种info类型的,为什么还要带个x?明明有确定按钮,似乎这个叉叉按钮去掉也没什么事,是不是很多人有类似的疑问?我很早之前就有过这样的想法,而且还付诸实践,直接把几个提示框右上角关闭按钮去掉,好干净好清爽,而且功能也没什么问题,还洋洋得意。后来,不断学习和积累,才发现当初的我对交互设计和用户体验的认知还很浅薄。

阅读全文…

canvas HTML属性尺寸和CSS尺寸多个细节深入

2018年07月8日 by 张 鑫旭 阅读 7708 次, 今日 7 次

原本以为canvas元素尺寸和img元素一样,结果深入一研究发现,还是有不少差异的,有兴趣可以进来看看,说不定可以学到点东西。

阅读全文…

小tips: touch-action简介与treated as passive错误解决

2018年07月5日 by 张 鑫旭 阅读 7608 次, 今日 18 次

Chrome以及Safari等浏览器下,有时候event.preventDefault()回报”Unable to preventDefault inside passive event listener due to target being treated as passive”的错误,有没有什么办法解决呢?本文就将提供几个解决之道,顺便介绍一些你可能不知道的CSS属性或者JS事件参数。

阅读全文…

CSS CSS3实现3D开门动画效果

2018年06月23日 by 张 鑫旭 阅读 17234 次, 今日 24 次

本文展示了2个自己写的酷酷的3D开门动画效果,然后顺便介绍了3D动画实现的一些相关技巧。本文有demo,有视频效果展示,还有必要的源代码讲解,希望本文的内容能够对您的学习有所帮助。

阅读全文…

是时候好好安利下LuLu UI框架了!

2018年06月12日 by 张 鑫旭 阅读 19855 次, 今日 14 次

LuLu UI是阅文前端荣誉出品的UI框架,基于jQuery,针对PC网站,兼容IE8+,包含20+静态或动态UI组件,非常适合面向外部用户的网站开发。

具有贴近用户,上手简单,使用场景广泛,成熟,体验好等优点,面向设计,方便体验侧前端同学进行开发,方便设计师视觉还原和创意实现,在PC端用户侧网站开发上,LuLu UI有着不可匹敌的竞争力!

阅读全文…

CSS3 animation属性中的steps功能符深入介绍

2018年06月11日 by 张 鑫旭 阅读 14961 次, 今日 35 次

steps()有一定的学习难度,很多概念总是搞不清楚,所以本文算是个自我挑战,看看能不能说清楚steps()中的相关概念,方便大家理解与学习。本文有些篇幅,有些深入,如果您时间较紧,可以先马后看。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

微信网页悬浮窗交互效果的web实现

2018年06月6日 by 张 鑫旭 阅读 21141 次, 今日 16 次

微信更新后,发现多了个悬浮窗功能。公众号阅读,网页浏览回退后默认会出现。再点击,可以回到刚才阅读的地方。于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了。我个人觉得是很有用的一个功能。

其交互效果,也被不少人称赞。例如,窗口会收缩到悬浮按钮中,悬浮按钮可以拖到右下角取消浮窗。这些交互效果呢,使用web前端技术也是可以实现,有demo,有截图,有必要的源代码展示,希望本文的内容能够对您的学习有所帮助。

阅读全文…

《CSS世界》女主角诚寻靠谱一起奋斗之人

2018年06月5日 by 张 鑫旭 阅读 16469 次, 今日 14 次

上图这位美女诚寻靠谱一起奋斗之人,详细信息见文章介绍……

阅读全文…

突破本地离线存储5M限制的JS库localforage简介

2018年06月4日 by 张 鑫旭 阅读 14518 次, 今日 45 次

说到本地存储数据,我们首先想到的是localStorage,应该很多小伙伴都用过,使用很简单。然而,localStorage却有不少确定,如存储容量限制,只支持字符串等。localforage的作用就是用来规避上面localStorage的缺点,同时保留localStorage的优点而设计的。具体是怎么规避的呢?最终使用效果又是怎样?

即将为你揭晓……

阅读全文…

JS实现照片图片变成黑白线条线稿

2018年06月3日 by 张 鑫旭 阅读 12423 次, 今日 10 次

本文演示如何使用JS实现照片图片变成黑白线稿图片效果,照片变成黑白简单线条有什么用呢?我能想到的就有5个用途,具体是什么,不妨进来看一看~

阅读全文…