Jxx Blog

Jxx Blog

JS重写构造函数后原型prototype中的constructor的指向问题

前言构造函数的prototype属性指向它的prototype对象，也就是原型对象，在原型对象中有一个constructor属性，指向该构造函数。但是我们在使用构造函数时，一般会重写它的原型，会导致constructor指向出问题。 function Animal() {} Animal.prototype.say = function () { console.log(...

Posted by Jxx on April 1, 2017

Snap基础——如何使用Snap.svg操作和动画SVG

在本教程中，我们将介绍Snap.svg，这是一个JavaScript库，它的功能跟jQuery在dom的作用差不多，只不过它是专门用来操作svg的。有了它，我们就可以轻松的使用javascript和svg打交道了。为了演示一些可用的功能，我们将用SVG制作一个有动画效果的眼睛。 Snap的那些事儿说起Snap就不得不提Raphäel.js这个库。因为Snap的创造者正是Raphäel...

Posted by Jxx on May 14, 2016

理解SVG的viewport,viewBox,preserveAspectRatio

viewport 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 <svg width="500" height="300"></svg> 上面的SVG代码定义了一个视区，宽500单位，高300单位。注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。也就是说，上面SVG的视区大小...

Posted by Jxx on May 12, 2016

SVG基础——使用Curve指令创建路径

曲线指令曲线指令一共有三组，和直线指令一样，指令字母大写表示坐标位置是绝对坐标，指令字母小写表示坐标位置是相对坐标。三次贝塞尔曲线指令 (C, c, S, s) 二次贝塞尔曲线指令 (Q, q, T, t) 椭圆弧线 (A, a) 三次贝塞尔曲线指令通过定义一个起点和终点，以及两个控制点（一个控制起点，一个控制终点），绘制一条贝塞尔曲线。三次贝塞尔曲线指令的格式...

Posted by Jxx on May 9, 2016

SVG基础——使用Line指令创建路径

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。 SVG的常用属性 fill:元素的填充颜色 fill-opacity:元素的填充颜色透明度 stroke:元素的笔画颜色 stroke-width:元素的笔画宽度 stroke-opacity:元素的笔画颜色透明度 SVG的属性参考和元素参照 ...

Posted by Jxx on May 6, 2016

SVG基础——SVG文件结构

SVG图形其实就是一段XML代码，在HTML页面引用是通过引用.svg文件格式，或者直接在.html文件中放置<svg>元素。而两者最大的区别就是，独立的SVG必须添加一个XML声明。一个独立的SVG文件，也就是平时看到的以扩展名.svg结尾的文件，他主要包括： XML声明 <svg>根元素包括一个用来描述SVG的XML声明空间。其中XML声明其...

Posted by Jxx on May 4, 2016

使用原生JS的AJAX读取json全过程

AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） AJAX用于前端与后端文件比如xml或者json之间的交互由于AJAX不是完全前端，需要用到服务器，所以在做实验的时候必须把html文件和xml或json放到服务器部署的目录之中，我用的是本地服务器首先编辑一个简单的JSON文件，并命名为test.jso...

Posted by Jxx on April 28, 2016

input框的placeholder值设置direction: rtl;placeholder里的括号显示异常

给input框设置placeholder的样式 ::-webkit-input-placeholder { direction :rtl; } 当placeholder里的内容最后一个是括号的时候，括号跑到了最左边，此时需要在placeholder的内容最后面加上‎ (十进制写法‎) 如 <input type="text" p...

Posted by Jxx on April 25, 2016

rem灵活移动端适配

用js或者vm来适配

什么是rem? rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。如下代码，相信很多做移动端的都见过，这段js代码可以有效适配任何移动端设备没有问题。缺点是页面需要加载js代码 !function(win){ var e=win.document, t=e.documentElemen...

Posted by Jxx on April 23, 2016

clientHeight offsetHeight scrollHeight区别

普通div 区别图如下 documentElement 和 body 相关说明： body是DOM对象里的body子节点，即 <body> 标签； documentElement 是整个节点树的根节点root，即<html> 标签；区别图如下 document.documentElement.clientHeight显示的是...

Posted by Jxx on April 19, 2016