Sublime Text Snippets 模板库插件

前言 模板库插件对于我们做前端的人来说也很有历史的了,还记得以前刚做前端的时候,如果遇到经常用到的代码,就是把这些代码放到一个文件中,到用的时候就打开文件,复制粘贴完成手动版的模板库功能,但是现在就不用这个纯手工的方法了,因为我们有了Sublime Text Snippets 模板库插件。 Snippets 之旅 安装配置 安装方法也是一如既往地简单,在这里就不多说了。安装完后就可以用了,但要怎么用呢?...

2017
06-27

Sublime Text Clipboard Manager 剪切板历史管理插件

Clipboard Manager 是 Sublime Text 3 里的一个剪切板历史管理插件。虽然不是很强大,但可以让你用得爽爽哒。这样的功能真的得收藏好,到用的时候才知道它有多贴心,多么令人动容。好,费话不多说,开始! Clipboard Manager 的安装我想在这里也不用多说了,会用 Sublime Text 的都会。这篇文章只想说说它的配置及用法,我估计这才是你来到这里的原因。我相信你肯定不会白来一趟。 首选配置一些快捷键:复...

2017
06-26

Sublime Text CTags 插件

Sublime Text CTags 插件用来定位函数,这个方法跟搜索功能比起来有着异曲同工之妙,不过你不需要输入任何字符,直接键盘+鼠标键就可以找到你要找的函数。用法可以看这里:https://github.com/SublimeText/CTags。这个插件的安装方法可能会让你觉得不适,但你得挺住。 要想成功在 Sublime Text 中使用这个插件,你只需要做两件事: 1. 在 Sublime Text 的Package Control 中安装此插件。 2.下载一个压缩包...

2017
06-24

Sublime Text 让天下没有难敲的代码

前言 Sublime Text 非常地轻量,以至于可以用秒来的形容,轻量归轻量,但强大也是它的墓志铭。所以这是一篇 Sublime Text 的专卖。不要怀疑,就是它。 准备 官方下载地址:http://www.sublimetext.com/ 官方文档:http://www.sublimetext.com/docs/3/(这里是 Sublime Text 3 的文档) 官方放出的安装方法有两种,一种是 .exe 安装,一种是直接解压就可以用。至于那一种好,其实看你自己怎么用。如果是...

2017
06-24

JavaScript 实现照片墙效果

照片墙效果相信你也看到过不少,在这里我们也尝试去做了一个,没有炫丽的效果,没有多余的文字,一时按捺不住成就感,在此把在大神眼里不值一提的照片墙效果献上。请多多包含! HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墙效果-云库前端</title> <link rel="stylesheet" href="./css/style.css">...

2017
06-21

Eclipse 搭载 Tomcat 部署 WEB 项目

前言 在本地部署 WEB  项目,对于从事前端开发的人来说也是一个必备的技能。本文 eclipse 搭载 tomcat 来配置本地服务。其实这个配置也很简单,甚至很多人会觉得也没什么必要拿来说事,但我相信会有很多小白会在这上面花了不少时间。所以此文就诞生了。 准备 下载 Eclipse 、jdk、apache tomcat。可以都下载最新的版本,也可以下载较旧的版本。这个就看你自己在这方面有什么特别的喜好的。 Eclipse EE...

2017
06-19

本地 apache tomcat 之 web 项目部署

前言 在团队开发软件时,项目的协同合作就非常重要了。这个协同合作包括很多方面,如:git 的运用,本地调试,代码封装等,但这篇文章主要是想分享下在本地调试的时的环境配置问题。也就是把 web 项目部署到本地的 apache tomcat。说真的这个部署步骤非常地简单,但如果没有了解其中的套路,估计也得折腾好长一段时间。 下载安装 工欲善其事必先利其器,所以我们现在先来把所有需要的资源都一一准备好...

2017
06-16

苹果系统菜单动感地缩放效果

苹果系统好用是公认的,虽然有很多限制,但还是无法阻止你去用它。这一次要分享的是一个苹果系统底部的菜单效果。 效果演示:http://yunkus.com/demo/apple-macos-menu/ CSS 代码 .menuBox{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .menuBox img{ width: 64px; height: 64px; cursor: pointer; } HTML 代码 <div id="...

2017
06-15

信微信聊天窗口输入框实现方案

微信相信你不陌生了,即使你天天用并且你也从事前端工作,但如果你没有遇到过这样的需求,你是不会留意到微信聊天窗口底部的那个输入框里的用户体验优化细节。如果我说对了,那么你可以先打开微信,然后输入很多很多内容,看看那个输入框会怎么变化。 如果你觉得这很麻烦,好,我用文字直播。当你输入的内容超过一行时,输入框的高度会自己适应你的内容以容下两行内容,但当你输入的文字达到一定的行数时,...

2017
06-13

JavaScript 实现图片放大效果

图片放大效果在商城类网站最为党见。这种效果不仅提升了网站的性能,切省了流量,还能带来更好的用户体验,何乐而不为。当你在网上商城看某个产品时,注重细节的你是不是会很自然地去把鼠标放到左边的小图片上查看产品的大图。这种效果可能会让人的购买欲倍增,毕业图片都是做得很高大尚的。好了现在回到正题上,这个效果要怎么做? 首先人们得理清下思路,想想这个功能都有会涉及到什么东西。不要觉得这个...

2017
06-10

JavaScript 组件封装的基本套路

这篇文章没有过多的言语来说明什么是组件封装,封装组件有什么好处,这里只会贴出一段代码以便自己日后查阅,如果你碰巧看到了这篇文章,那么我只能跟您说声抱歉了。因为没有过多的说明,可能会让你看完之后更加困惑。所以你用眼睛扫一下,觉得没意思的话,我建议你就不用再往下看了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...

2017
06-08

CSS3 创建圆形进度条

前言 对于现如今越来越讲效率的互联网时代来说进度至关重要,而反应进度的进度条也就理所当然的成了主角,那么现在问题来了,这个进度条在前端中我们要怎么用代码画出来呢?不过在本文中我们只对圆进度条进行分析,因为直线式进度条比较简单。 SVG 实现 基本实现 基本 CSS 样式 *{ padding: 0; margin: 0; } .container{ width:130px; height:130px; margin:0 auto; } H...

2017
06-07

JavaScript 面向对象的继承

什么是面向对象的继承 继承:在不影响影响父类功能及完整性的情况下,子类可以继承父类的一些功能。一个子类(派生类)可以继承自另一个父类(基类),派生类可以覆盖来自基类的方法。在基类中调用派生类对象的方法时,如果这个方法被派生类覆盖,那么应调用派生类的方法(多态) JavaScript 会沿着原型链查找方法,一旦在派生类找到了同名方法,就不会使用基类的方法。 我们先来创建一个自定义对象(父...

2017
05-30

JavaScript 中面向对象的属性和方法

JavaScript 中面向对象的属性和方法比如 hasOwnProperty、constructor ,虽然不是很常用,但是了解它们对于学习 JavaScript 还是有帮助的。下面我们就来看看这些属性和方法 hasOwnProperty() hasOwnProperty:判断是否是对象自身下面的属性 var arr = []; arr.Site = "云库网"; Array.prototype.siteDomain = "yunkus.com"; console.log(arr.hasOwnProperty("site")); // true console.log(arr.hasOw...

2017
05-30

JavaScript 中的包装对象

请看下面这几行代码: var str = "yunkus"; str.length str.charAt(0); str.toUpperCase(); console.log( typeof str ); 相信像上面这样写,你肯定不会觉得奇怪,因为平时你也是这么使用的。但如果你仔细想一想,心里就会有一个疑惑:为什么基本类型也有属性和方法,这不是对象的专利吗?我们都知道 str 是一个字符串类型,也就是基本类型,为什么还会有属性和方法,它是通过什么方式实现的? 没错就是...

2017
05-28

JavaScript 面向对象编程详解

前言 JavaScript 面向对象编程估计你平时也看到了不少,只不过你可能不知道它就是 JavaScript 面向对象编程,这也就是为什么你会来到这里的原因。话不多说,我们马上开始面向对象之旅。 什么是面向对象编程 面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)简单的说就是用对象的思想去编程,也就是创造一个对象,然后往这个对象身上添加若干属性和方法。 面向对象编程特点 1.封装...

2017
05-22

移动端一个像素问题解决方案

前言 移动端(手机等)已成为人们最常用的设备,对于我们这些前端开发人员来说,为了让用户用得爽,看得服务是不够的,因为你有时候还得听一个人的话,他就是传说中的设计师,比如:有时他会跟你讨论这样一个问题,为什么这条线看起来比我原型稿的粗一些,这也太粗了吧?诸如此类的话,让你连反驳的机会都没有,于是也只能暗暗的研究,找解决方法。 起因 这个原因真的不能怪你,但必需要你自己解决。生...

2017
05-21

CSS3 transform 你知多少?

transform 属于CSS3 的新属性。这个属性可以让我们实现很多以前只能通过 JavaScript 来实现的效果。比如元素的运动(缩放、旋转……)。所以这个新属性还是有必要用专门一篇文章来介绍它。毕竟它让我们通过了另一种方式让网页走向多姿多彩的世界。如果你觉得 transform 只能给你带来一点点便利,那么你就大错特错了,因为 transform 除了可以实现 2D 效果外,它还可以实现 3D 效果。现在让我们开...

2017
05-08

JavaScript 事件冒泡与事件捕获详解

在前端里,说到交互我们就不得不提提 JavaScript 中的事件,而事件又分为很多种,比如:点击事件。但这篇文章的主要内容不是分析有什么事件,而是在另一个角度来了解事件机制。正如标题所说的冒泡以及捕获。 一个事件被触发后,一般会有三个不同的阶段:捕获阶段、目标阶段和冒泡阶段。 捕获阶段:从文档的根节点开始流到目标节点。 目标阶段:当到达目标节点时,进入目标阶段。 冒泡阶段:冒泡正好跟捕获...

2017
04-30

移动端触摸(touch)事件

移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空。该来的总会来,我们要做的就是接受未知的挑战。正如你所看到的,这是一篇关于移动端触摸事件的文章,也就是我们平时在手机中用得最多的动作:touch。现在让我们开始 touch touch touch 吧! Touch 事件 首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。望文生...

2017
04-23

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

前言 按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量。对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少。 原理 实现图片懒加载的原理也非常地简单,默认情况下不给图片 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

文字换行处理 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

仿 PC 端网易云音乐图片轮播效果

本文给大家分享一个仿 PC 端网易云音乐图片轮播效果,代码基于 jQuery 开发,虽然仿得不是十分像,但基本的效果还是做出来了,有需要的朋友可以看看。为了不浪费你的时间,如果是 JS 大神请略过本文,当作什么都没发生过。 效果演示:http://yunkus.com/demo/clone-netease-cloud-music-picture-carousel/ HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="ut...

2017
03-02

JavaScript 变量

什么是变量 变量就是用来存放数据的容器。 变量命名法 变量命名是区分大小写的,并且不允许使用 JavaScript 的关键字和保留字做变量名。所有变量的命名法都是基于上面两条命名原则的。 匈牙利命名法 通过在变量名前面添加相应小写字母作为前缀标示变量的作用域或类型等。前缀后面是一个或多个单词的组合,单词描述了变量的用途,比如g表示全局变量,l表示局部变量。 <script> var gGoodWebsit...

2017
02-28