web前端
文章平均质量分 79
yeana1
也纳
也可是个人,也可是企业,代表了平台的多样性。
纳具有包容,收入的意思,代表了平台的内容。
也纳是一个海纳百川,包罗万象的平台。无论你是个人还是企业,平台都能满足你的需求。
展开
-
CSS3 动画卡顿解决方案
前端时间用 animation 实现 H5 页面中首页动画过渡,很简单的一个效果,首页加载一个客服头像,先放大,停留 700ms 后再缩小至顶部。代码如下html>head lang="zh-cn"> meta charset="utf-8"> meta name="viewport" content="width=device-width,initial-scale=1.原创 2016-10-08 15:21:36 · 37032 阅读 · 3 评论 -
JavaScript设计模式与开发实践 – 观察者模式
概述观察者模式又叫发布 – 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者)。发布者的状态发生变化时就会通知所有的订阅者,使得它们能够自动更新自己。观察者模式的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变原创 2016-09-14 14:53:36 · 464 阅读 · 0 评论 -
使用纯前端JavaScript 实现Excel IO
最近要为某国企做一个**统计和管理系统,具体要求包含Excel导入导出根据导入的数据进行展示报表图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格Excel导出,并要提供客户端来管理Excel 文件…要求真多!现在总算是完成了,于是将我的经验分析出来。在整个项目架构中,首先就要解决Exce原创 2016-09-02 16:10:38 · 2646 阅读 · 1 评论 -
为什么要用 Node.js?
这是一个移动端工程师涉足前端和后端开发的学习笔记,如有错误或理解不到位的地方,万望指正。Node.js 是什么传统意义上的 JavaScript 运行在浏览器上,这是因为浏览器内核实际上分为两个部分:渲染引擎和 JavaScript 引擎。前者负责渲染 HTML + CSS,后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8,它的原创 2016-09-12 16:08:47 · 1217 阅读 · 0 评论 -
非常酷!CSS3三角形运用!
概述在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!本文的Demo和源代码已放到GitHub,如果您觉原创 2016-08-09 16:05:00 · 1513 阅读 · 1 评论 -
如何设置链接样式
前言通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍,即 link-visited-hover-active,可记为 LoVe-HAte 。要想弄明白为什么是这个顺序,首先我们需要知道,CSS在确定应当向一个元素应用哪些样原创 2016-09-10 15:08:54 · 1197 阅读 · 0 评论 -
从零开始,DIY一个jQuery(1)
这会是一段很长的历程,但也会很有意思 —— 作为前端领域的经典之作,jQuery 里有着太多奇思妙想,如果能够深入理解它,对于我们稳固js基础、提升前端大法技能来说大有裨益。另外,本系列的相关代码均可以从 我的github 上获取到。1. 免 new 实现我们在使用很多插件的时候,都需要使用 new XXX() 的写法来实例化一个引用:var原创 2016-08-18 16:05:05 · 383 阅读 · 0 评论 -
CSS3初体验之奇妙技巧!
自CSS3流行以来,虽然以前看过一遍所有的新增属性,但其实在实际项目中用到的少之又少。所以没有形成系统性的认识,以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求,所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。在正式开始css3之前,先来介绍一些比较经典的css3实例,让大家好好感受一下css3的魅力,本文会提到以下几个css3的属性:原创 2016-08-06 15:35:59 · 424 阅读 · 0 评论 -
使用CSS3实现60FPS动画
使用动画在移动应用程序中很容易的。如果您遵循我们的建议,移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画,当然很多人也不这么做。很多最佳实践,还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因,因此没有大力的支持。面对这么多的终端设备,如果不考虑优化你的代码,你最终将会交付一个水平一般的效果,从原创 2016-08-17 16:11:41 · 1751 阅读 · 0 评论 -
手把手教你玩转酷炫CSS3 3D技术!
要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。平移同理。当然用理论来说明,估计你还不明白。下面是3个gif:沿着X轴旋转沿着Y轴原创 2016-08-05 15:53:04 · 984 阅读 · 0 评论 -
也纳人才教你Vue.js60分钟快速入门!
Vue.js介绍Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM原创 2016-08-16 16:10:37 · 650 阅读 · 0 评论 -
使用CSS3画出一个叮当猫!超可爱!
刚学习了这个案例,然后觉得比较好玩,就练习了一下。然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得。但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下:PS:说原创 2016-07-21 16:30:22 · 3286 阅读 · 2 评论 -
CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段,并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端原创 2016-08-13 15:54:46 · 2177 阅读 · 1 评论 -
用 CSS3 绘制你需要的几何图形
1、圆形示例:思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下:html: css:.size{ width:200px; height:200px; background:#8BC34A;}.example1{原创 2016-09-05 15:50:42 · 849 阅读 · 0 评论 -
细说 webpack 之流程篇
引言目前,几乎所有业务的开发构建都会用到 webpack 。的确,作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合,它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒,首先来谈谈它的流程。准备工作1. webstorm原创 2016-09-18 15:46:08 · 2246 阅读 · 0 评论 -
css3动画由浅入深总结
一:过渡动画---Transitions一:过渡动画---Transitions含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。Transitions属性的使用方法如下所示:transition: property | duration | timing-function | del原创 2016-09-30 16:12:19 · 862 阅读 · 0 评论 -
聊聊Clip-Path
前言图片是一个网站必不可少的元素,而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作,通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题,实际项目中可能用的比较少,包括博主自己也只是用过几次剪切,很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢,必须深入探究!正文Flilterfilter有十种特效来处理图片,博主只放几种特效的原创 2016-09-29 15:15:23 · 1406 阅读 · 5 评论 -
探索 CSS3 中的 box-shadow 属性
挖掘你之前未曾见过的一些应用。“box-shadow”属性box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度(第三维)的错觉。语法box-shadow属性接收一个由5个部分组成的值box-shad原创 2016-09-28 15:57:18 · 1164 阅读 · 0 评论 -
整理总结的一些前端面试题
HTML面试题1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2.前端页面有哪三层构成,分别是什么?作用是什么?结构层 Html原创 2016-09-26 15:11:53 · 1472 阅读 · 0 评论 -
css3中flex布局教程:语法篇
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性+ position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能原创 2016-09-22 15:38:24 · 686 阅读 · 0 评论 -
前端单元测试之Karma环境搭建
前言在前端开发中,测试常常是被忽略的一环。因此最近在研究前端自动化测试框架Karma,把个人的学习过程分享出来,希望对大家有帮助。什么是Karma?Karma是由Google团队开发的一套前端测试运行框架。它不同于测试框架(例如jasmine,mocha等),运行在这些测试框架之上。主要完成一下工作:Karma启动一个web服务器,生成包含j原创 2016-09-21 15:37:49 · 1244 阅读 · 0 评论 -
九个Console命令,让 JS 调试更简单
一、显示信息的命令 常用console命令 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /> <scripttype="text/javascript">原创 2016-09-08 15:43:51 · 510 阅读 · 0 评论 -
CSS3 单选框动画特效
Action one首先,来看一下我们的第一个特效注意,这个地方的黄点不是我们特效的一部分,这个黄点之所以存在是我使用的屏幕录制软件自带的。可以很清楚的看到这个特效就是当我们点击的时候,黑点会以一种缩放的动画显示出来,下面来看看具体如何实现。<divclass="radio-1"> <inputtype="radio"n原创 2016-09-23 15:26:00 · 638 阅读 · 0 评论 -
打造高大上的Canvas粒子动画
首先来看下我们准备要做的粒子动画效果是怎么样的~是这样:或者是这样:甚至是这样:很酷炫!那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。技术选择因为粒子数量很多,而且涉及到图像像素处理,所以这里使用Ca原创 2016-09-07 16:03:38 · 14717 阅读 · 9 评论 -
你不可不知的 HTML 优化技巧
如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大。如何有效的降低HTML 代码的复杂度和页面元素原创 2016-09-20 15:06:02 · 465 阅读 · 0 评论 -
CSS进阶:试试酷炫的 3D 视角
写这篇文章的缘由是因为看到了这个页面:https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1(移动端页面,使用模拟器观看)运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 页面可谓十分博人眼球。原创 2016-09-19 15:52:30 · 723 阅读 · 0 评论 -
CSS3弹性伸缩布局(二)——flex布局
上一篇博客《CSS3弹性伸缩布局(一)——box布局》介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识。新版本简介新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一。这里我们还是继续上一篇博客中的例子,使用最新原创 2016-08-15 15:02:23 · 695 阅读 · 0 评论 -
HTML5前端开发之进阶篇
一、盒模型 我们在上篇文章中已经对HTML有了基础的了解,都说‘盒模型’非常神奇,但是很多朋友始终不能掌握其原理。此事无碍,且看此图。我们把这个盒子,类比成我们中秋节的时候包装月饼的月饼盒子。其中两个月饼盒子之间的距离就是咱们要介绍的-->margin(外边距).而咱们每个月饼都要有最外层的包装盒,这个包装盒的厚度,就是咱们的--> border(边框).原创 2016-07-20 15:28:48 · 4234 阅读 · 1 评论 -
CSS3 transition介绍 | 如何设计炫酷的动画效果?
本篇介绍CSS3里另一个人气动画属性transition。transition从效果上看是一种平滑过渡的动画,本质上是在线性时间内将属性从开始值过渡到结束值。例如获得焦点,点击鼠标等动作导致CSS属性值的变化是瞬间完成的,感觉有点生硬。用transition可以指定在某时间段内将属性值平滑过渡,增强用户体验。4个子属性transition-propertyt原创 2016-07-25 15:44:21 · 3101 阅读 · 0 评论 -
Linux下如何配置samba服务器?
Linux下如何配置samba服务器?原创 2016-07-02 14:53:02 · 578 阅读 · 1 评论 -
CSS实现垂直居中的常用方法
在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。首先,定义一个需要垂直居中的div元素,他的宽度和高度均为300px,背景色为橙色。代码如下:DOCTYPEhtml>html原创 2016-07-13 15:21:20 · 381 阅读 · 0 评论 -
Servlet的文件上传
Servlet 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器。上传的文件可以是文本文件或图像文件或任何文档。创建一个文件上传表单下面的 HTML 代码创建了一个文件上传表单。以下几点需要注意:表单 method 属性应该设置为 POST 方法,不能使用 GET 方法。表单 enctype 属性应该设置为multipart/form-data.原创 2016-07-01 15:45:54 · 472 阅读 · 0 评论 -
css3技巧之背景渐变
本来想先瞎扯些什么,然后又不知道讲什么的好,那就直接进入正题吧。首先区分下,平常给的纯色background,指的是background-color属性,而渐变色所指向的是background-image属性,是作为背景图像处理的。从渐变的形式分为2种:线性渐变(直线扩散)和径向渐变(从圆心扩散)。线性渐变: linear-gradient | repeating-line原创 2016-07-23 14:18:06 · 9760 阅读 · 1 评论 -
web前端开发工程师面试题大全
掌握这些题目,害怕web前端工程师的岗位上不去吗?原创 2016-07-12 11:30:23 · 12748 阅读 · 2 评论 -
HTML5 Web SQL 数据库!
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。原创 2016-06-30 15:44:52 · 870 阅读 · 0 评论 -
html2canvas 将代码转为图片
最近,有个朋友通过众成翻译学习和翻译了一系列优秀的文章,许多文章都值得向大家推荐。但是,好的技术文章通常都有大段的代码。一般情况下,这并没有什么问题,因为不论是众成翻译或者是其他转载技术类文章的平台,一般都支持代码的语法高亮展示和阅读。但是,也有一些公共的平台对代码的支持并不理想,比如微博的长微博:长微博里编辑正常的代码到了预览的时候被“自动压缩”了原创 2016-07-22 15:45:10 · 3280 阅读 · 0 评论 -
Java提高篇之详解内部类
可以将一个类的定义放在另一个类的定义内部,这就是内部类。 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二)。 第一次见面 内部类我们从外面看是非常容易理解的,无非就是在一个类的内部在定义一个类。 public class OuterClass { private String name ;转载 2016-06-29 15:59:38 · 325 阅读 · 0 评论 -
Java HashSet和HashMap源码剖析
之所以把HashSet和HashMap放在一起讲解,是因为二者在Java里有着相同的实现,前者仅仅是对后者做了一层包装,也就是说HashSet里面有一个HashMap(适配器模式)。因此本文将重点分析HashMap。原创 2016-06-28 15:27:40 · 404 阅读 · 0 评论 -
HTML head 头标签
HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。原创 2016-06-27 16:15:02 · 351 阅读 · 0 评论 -
CSS3 几步即可实现loading动画效果
参照网上的设计,本篇分享一下非常常见的Loading的效果。例子1:菊花状的Loading效果------------------------------第一步画出静态的小菊花。.sk-fading-circle { width: 40px; height: 40px; position: relative;}.sk-fading-ci原创 2016-07-14 16:06:07 · 4940 阅读 · 0 评论