按需加载图片(图片懒加载)

前言 按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量。对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少。 原理 实现图片懒加载的原理也非常地简单,默认情况下不给图片 scr 属性赋值。当满足一定的条件时才把图片地址取出来赋值给 src 属性。一般地,这上为了让网站页面有更好的用户体验,我们都会预先...

2017
04-18

Visual Studio Code 让高效进行到底

准备 一直都是用 sublime text 作为开发工具,用久了自然而然会觉得生活无趣,于是决定试试微软的新产品  Visual Studio Code 。 下载地址:https://code.visualstudio.com/ 安装完后给我的第一感觉就是天边送来了一波难以抵抗的视觉盛宴。 在这里界面里你就可以看到一个非常有情怀的快速链接:安装键盘快捷方式(你可以安装包括但不限于 Vim、Sublime、Atom 的键盘快捷方式),所有这个 coding 工具还...

2017
04-03

RequireJS 教程详解

什么是 RequireJS RequireJS 用于代码模块化,RequireJS 以一个相对于 baseUrl 的地址来加载所有的模块代码,使用 RequireJS 来开发,可以很好的避免变量污染全局环境。它的模块管理遵守AMD (Asynchronous Module Definition)规范,通过 define 方法来完成模块的定义以及模块代码的加载。 RequireJS 使用 引入 require.js <script src="js/require.js" defer async="true" data-main="js/main"&...

2017
04-02

移动端侧滑导航、侧滑菜单效果

手机端的侧滑导航、侧滑菜单效果极其地常见,这篇文章就是分享侧滑导航的制作过程。首先这是一个基于 jQuery 库的插件,其实不用 jQuery 库也是可以的,并且代码改起来也不能,这里就不作过多的讲解。 首先做这个效果的时候我们得分析下,要实现这个功能,我们需要什么技术。 所需技术 1.滑动,你可以JavaScript 实现 也可以用 CSS3 实现。这里我用CSS3 实现。 2.JavaScript 事件绑定解绑、事件禁用。 从...

2017
03-24

移动端列表索引效果

移动端列表索引效果非常实用,比如:手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果,写出来的代码,代码的结构基本一样,但功能会少一些,去掉了搜索框搜索,只有单纯的字母索引,不过这也基本够用了。这个效果是基于 jQuery 库的,所以在用的时候就记得引入 jQuery 库。 为了版面美观我专门用横屏截了个图,正如你所看到的,样板还是挺好看的,那功能怎么样...

2017
03-22

JavaScript + jQuery 常用方法整理

JavaScript 方法大全 元素操作 方法名 套路 注释 elementFromPoint() document.elementFromPoint(x,y) 通过点坐标来获取元素 classList element.classList element.classList 返回 一个包含所有 CLASS 类名的数组 属性: length,返回 class 类的个数; 方法: add(class1, class2, …) // 添加一个或多个 CLASS 类,若存在则不添加。 remove(class1, class2, …) // 删除一个或多...

2017
03-19

Linux 环境下 WordPress 发邮件的坎坷之旅

用上了阿里云的云服务器后,我的生活发生了翻天覆地的变化,天天被被折腾得体无完肤,吃不下,睡不着,辗转反侧,失眠多梦。从云服务器降生(13:25:23 2017/2/7)到 WEB 站点服务环境配置完成,到网站上线时文件权限设置及数据库文件上传的解决,再到后来的一些小事,如:WordPress 图片/文件上传问题,Linux 定时备份,还有这次记录的 WordPress 发邮件的坎坷之旅。整整花费了一个多月,其实在买这个云服...

2017
03-11

关于 WordPress 更新出错的那点事

事情发生在 13:35 2017/3/11 ,一个吃午饭的时间。打开wordpress 后台看到升级提示,对于我这种有微弱强迫症的人来说,升级是必需的。谁知道升级按钮一点,浏览器转了好久,然后无情地来了一个空白页,什么都看不见,心突然就碎满一地。 于是重新刷新了一遍页面,竟然提示我:您确定要这样做? 无耐,只能关掉页面重新再试一遍。美美地又来到了更新界面,点击更新按钮,被提示:“升级 WordPress 另一更新正...

2017
03-11

文字换行处理 word-wrap word-break white-space 用法及区别

作为前端的你,浏览器默的文字处理方式估计不用我再多说一句了。这里有两种情况我们需要知道的,但在实际中出现的机率不大,请看图: 前面的换行是因为我加了<br>标签,第一行我们不用管,只需关注第二行文字,第二行文字为什么会超出盒子? 我猜:在处理文字的时候浏览器会把它们看成一个整体(如:单词),并且不会拆分它们,一行又显示不完全,那怎么办呢?只能像上面那样处理了。于是就会出现了...

2017
03-08

移动端用滚动条属性实现左右滚动效果

前言 移动端左右滚动,不是我们常说的图片切换,只是实现了通过手指实现内容的左右滚动。现在很多app 都会有这样的效果。在线 Demo :http://yunkus.com/demo/mobile-use-scroll-bar-property-realize-horizontal-scroll/。注意:浏览器得切换到手机模式查看效果哦! 入门代码 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2017
03-06