一个热爱网络的年轻人的博客

使用CSS3的transition、visibility和opacity做淡入淡出效果不兼容的解决方案

刚做移动端页面的时候,看到一些成熟的网页做淡入淡出的弹窗遮罩效果,都喜欢用css里transition、visibility和opacity这三个属性,通过改变他们的值,结合js增减class即可,非常方便。上周做的一个项目,开发找我报bug,说是一个界面出不来,我看了下就是这段代码。然后重新测试了一下,发现这段代码在iOS8、9、10都有问题,之前为什么都没发现?

>>阅读全文<<
2016.10.24
标签: ,,
Category:工作学习
5 Comments

由一个网页css样式bug,发现浏览器解析怪癖

同事遇到一个问题,某一个网页,显示空白。自然而然的打开开发者工具查看DOM,发现body标签上有一段css,这段css就是隐藏网页,而源代码显示body标签上为空的。那就简单了,一般这种情况都是有js来影响他的,就把页面几个js打开搜了下关键字,没有发现。这就奇怪了,只能上绝招了,浏览器上把js禁止掉,结果body标签上这段css依旧在,这就不符合逻辑了。

>>阅读全文<<
2016.09.19
标签:
Category:工作学习
2 Comments

iOS的WebView里,HTML内容自适应

首先描述下遇到的问题:我们的iOS APP商品详情页,下面商品文描部分是单独弄的一个WebView,里面放从接口获取到的文描html内容。文描html里主要有部分html标签,例如div、p、span、table、img等,还有文字和图片。出现的问题是WebView只显示一半图片,部分文字非常大,需要做优化。

>>阅读全文<<
2016.09.14
标签:
Category:工作学习
1 Comment

手机端简单的图片上传预览、压缩示例

之前手机项目中有图片上传预览功能,都是让同事处理。这次抓住机会,向他请教学习后,自己写了个简单的示例,基本的知识点都罗列出来,希望对大家有帮助。

>>阅读全文<<
2016.08.04
标签: ,
Category:工作学习
3 Comments

scrolling – 移动端带滚动效果的返回顶部、返回指定位置的插件

因为页面用了Zepto,自然想到用animate,设置300ms然后scrollTop为当前表单距离网页顶部高度即可。结果发现根本不生效。问同事后一起看源码,才发现Zepto里的animate只能改变CSS,而scrollTop属于js范围,恰巧jQuery又优化过这个,所以jQuery可以这样写,Zepto不行。

>>阅读全文<<
2016.07.20
标签: ,
Category:工作学习
1 Comment

JavaScript和jQuery的DOM操作对比

现如今主流网站jQuery占有率超过70%,大部分几年工作经验的前端都非常熟练的使用jQuery,但没多少同学会去看一些基础的JavaScript,其实是很可悲的。一方面是jQuery已经做好非常容易上手,可以解决绝大多数问题,另一方面,这几年前端界实在是发展太快了,新技术层出不穷,同学们都眼花缭乱不知道学什么。

>>阅读全文<<
2016.06.15
标签: ,
Category:工作学习
6 Comments

难忘的六一

跟往常工作日一样,闹钟醒了起床洗漱。外面在下大雨,心想今天就奢侈一把,虽然我住的地方离公司步行20分钟,但这么大的雨,还是开车去吧,花点停车费开到公司门口算了。然后在同事群里发了个消息,谁顺路帮我买两包子。

>>阅读全文<<
2016.06.01
标签:
Category:社会生活
9 Comments

给前端新人的小工具:CSS常用命名

作为一个对代码负责的人,每次看见别人代码里混乱的命名,总是不禁心里一顿暗骂。问及写代码的人,他们的回答总是:我英文不好,不知道如何取名,都想破了脑袋。而一些QQ群里提问题的朋友截图代码,命名也是非常混乱。网上有很多人发表CSS常用命名的文章,也都挺好的,我只是一个收集者,和把自己的常用命名加上去,分享给有需要的人,希望大家以后写的代码自己看着舒服,别人维护着也舒服。

>>阅读全文<<
2016.02.18
标签:
Category:工作学习
7 Comments

iOS Safari里,获取网页窗口的正确高度

月初优化移动端下拉加载插件dropload的时候,发现一个iOS Safari的bug。我的目的是想不论是第一次加载页面、之后刷新页面或者浏览器窗口变化的时候(resize),都可以获取到当前正确的窗口高度。结果简单一句$(window).height()居然办不到。没办法,只有慢慢测试,加上求助于同事。之后同事搜到一篇国外文章,算是解决了这个问题。由此可见懂英文的重要性!

>>阅读全文<<
2015.12.30
标签: ,,,,
Category:工作学习
4 Comments

华硕笔记本A450JF升级Windows 10 屏幕花屏闪屏解决办法

华硕笔记本A450JF升级Windows 10后,屏幕显示花屏闪屏。打电话华硕客服,说是显卡驱动问题。先让我去官网找这款电脑Windows 10的显卡驱动,我去找了并没有,然后又让我下载Windows 8.1的显卡驱动。下载后又不能装,客服的建议是让我重装会Windows 8.1。这明显不是我想要的结果。

>>阅读全文<<
2015.11.02
标签: ,
Category:工作学习
6 Comments
返回顶部