2017年01月_Jarvan大熊

原创 Vue.js 快速搭建

Vue.js 现在在后端、前端、微信、移动端Web非常流行，今天简单模拟Vue.js快速安装；安装npm npm 是node.js 的包管理工具, 安装流程地址：https://docs.npmjs.com/cli/install 估计会非常慢，我们可以使用淘宝NPM镜像下载安装：https://npm.taobao.org/##安装npm##sudo npm instal

2017-01-16 10:58:23 945

原创响应式布局：CSS3弹性盒flex布局模型

页面布局一直都是web应用样式设计的重点我们传统的布局方式都是基于盒模型的利用display、position、float来布局有一定局限性比如说实现自适应垂直居中随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型flex弹性布局使用弹性布局可以有效的分配一个容器的空间即使我们的容器元素尺寸改变它内部的元素也可以调整它的尺寸来适应空间若想让一个元素变成...

2017-01-10 17:40:44 14964

转载正则表达式大全

Js代码 function SubmitCk() {var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if (!reg.test($("#txtEmail").val())) {alert(

2017-01-10 15:32:00 474

原创 HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例

介绍之前做两个声明：以下代码可以直接运行，当然你别忘了引用jQuery才行。复制代码代码如下:// DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。// 这个特性包括两个事件：// 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据（手机

2017-01-12 17:07:01 736

原创 Html5+JS实现手机摇一摇功能

这篇文章主要介绍了Html5+JS实现手机摇一摇功能,本文使用HTML5的DeviceOrientation实现监听手机方向传感器数据,实现摇一摇功能雏形,需要的朋友可以参考下HTML5一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：1、 deviceOrientation：封装了

2017-01-12 17:05:57 2536

原创一些移动端笔记

Touch1.touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指。2.touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。3.touchend：当手指离开屏幕时触发。4.touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一

2017-01-12 16:27:16 315

转载 HTML5实现动画三种方式

编者注：作者以一个运动的小车为例子，讲述了三种实现HTML5动画的方式，思路清晰，动画不仅仅是canvas，还有CSS3和javascript.通过合理的选择，来实现最优的实现。PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！分三种方式实现：(1) canvas元素结合JS(2) 纯粹的CSS3动画（暂不被

2017-01-12 10:40:02 6373

原创响应式布局：CSS3媒体查询Media Queries

利用我们的CSS3实现响应式布局仅仅有弹性盒还不够 CSS3还扩展了media属性，增加了一个模块功能 Media Queries媒体查询功能媒体查询引入随着移动端的快速普及越来越多的用户使用智能机、平板电脑等浏览页面所有考虑到用户的需求我们要保证用户在各种设备上浏览页面都有不错的体验这样我们就需要媒体查询它允许我们为不同的设备或者不同条

2017-01-10 17:44:27 1945

原创 HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制

HTML5中最有意思的就是这个canvas了通过它我们可以画自己想要的图形它也是十分重要的技术应用于游戏、图表等等或者绘制各种酷炫的东西这里给大家分享一个网站传送门里面都是canvas技术绘制的图形画布创建canvas是html的一个标签是一个图形容器首先要在html页面添加一个canvas元素<canvas id="myCanvas" width=500 height=5...

2017-01-10 17:34:05 16321

原创 HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影

上一篇文章我们了解了一些canvas基本图形绘制下面我们再来看一些相关操作坐标轴变换我们画布中默认的坐标轴与浏览器坐标轴相同 x正半轴朝右 y正半轴朝下但是我们可以手动设置画布坐标轴变换首先还是会获取“画布”和“画笔”canvas id="myCanvas" width=500 height=500>canvas>11var canvas = docu

2017-01-10 17:32:21 6919

原创 jQuery框架常用的性能优化

jQuery作为一个JavaScript非常优秀的库是我们在学习前端过程中必学的虽然它的流行程度已经没有那么巅峰了但是学习了它对我们学习理解其他库以及框架来说很有帮助今天第一次写jQuery的相关文章，就先把这个性能问题拿出来因为大家把时间都用在jQuery语法上了，对这个库的性能优化不是很了解下面我来给大家总结一下jQuery常用的性能优化1.选择

2017-01-10 17:29:35 373

转载 HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性我们不仅仅可以绘制图形，还可以向画布中添加文字文字填充同样先获取元素对象与环境对象canvas id="myCanvas" width=500 height=500>canvas>11var canvas = document.getElement

2017-01-10 17:22:52 2919

转载高效的jQuery代码编写技巧总结

本文总结了代码编写技巧，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。其次在脑子里牢牢记住jQuery就是javascript，这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。当你准备使用jQuery,我强烈建议你遵循下面这些指南:缓存变量DOM遍历是昂贵的

2017-01-10 16:58:20 430

原创 jQuery笔记总结篇

原文链接 http://blog.poetries.top/2016/10/20/review-jQuery首先，来了解一下jQuery学习的整体思路XMind源文件提供参考下载[Jquery笔记]XMind源文件提供参考下载第一节 jQuery初步认知jQuery概述JQuery概念j

2017-01-10 16:47:36 3068 1

原创 2016 年 50 个最佳的轻量级 JavaScript 框架和库

回顾今年已发布的 JS 框架和库，我们针对地筛选了一些能够提供直接和具体功能的免费 JavaScript 插件和库，与大家分享。它们可不是臃肿的一站式框架，而是一些轻量级，并能够帮助你更快、更容易地进行网页设计与开发的实用型框架。正如你期望的，文中的一些插件可用来创建滑块、图片库、响应式菜单、弹出式窗口以及许多其他常见的组件。同时，你也可以发现一些能够提供独特功能的插件，像旁注工具、GIF 预

2017-01-10 16:39:28 879

原创 css3基本样式汇总

background-attachment /*背景图像是否固定或随着页面的奇遇部分滚动 fixed*/background-colorbackground-image /*url("xxx.jpg")*/background-repeat /*设置背景图片是否及如何重复 repeat no-repeat repeat-x repat-y*/background-posi

2017-01-10 16:30:56 1242

原创如何进行移动端的页面开发

应该说，移动端的开发是伴随着HTML5的兴起而出现的，2007年第一款iPhone诞生，2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起，发展到今，移动互联网已经和人们的日常生活密切相关。作为开发者，对于一个崭新的事物，一直在尝试的“路上”，到底最好的开发方式是什么？本文介绍了从移动端诞生到现在，自己探索到的开发方法，并配以相应知识点，欢迎跟大家沟通、分享。初次

2017-01-09 11:48:24 443

大熊的博客