2016年10月
-
移动分页实现
1、判断条件需要理解三个值： 1.scrollHeight 真实内容的高度 2.clientHeight 视窗的高度，即在浏览器中所能看到的内容的高度 3.scrollTop 视窗上面隐藏掉的部分，即滚动条滚动的距离 2、解决思路： 1.使用$(window).scroll();方法来触发是否加载 2.通过 真实内容高度 - 视窗高度 - 上面隐藏部分 < 20 ,作为加载触发的条件 3、实现代码： var page=1; //当前页的页码 var allpage; //总页码，会从后台获取 function......
-
浅谈css3的混合模式
在photoshop中，我们处理图片，在图层之间有混合模式，点击混合模式里面的选项，可以使图片实现不同的效果，这个混合模式在css3中也有实现！下面就来介绍一下css3的混合模式。css3的混合模式主要使用mix-blend-mode这个属性来实现的。当然，也可以用background-blend-mode。下面我就来介绍一下这2个属性吧！ mix-blend-mode 这个用法很简单，就是在你需要混合的div上面添加这个属性就可以了，例如如下： mix-blend-mode: multiply; multiply，这个就是我们ps中的正片叠底！ 类似的属性我列举一下......
-
Why We Chose Vue.js
##Why We Chose Vue.js 翻译一篇来自gitlab官方博客所写的文章作为vuejs的介绍推荐。个人觉得vuejs是一个非常值得学习的框架。 原作者 Jacob Schatz 原文链接 Why We Chose Vue.js 我几周前在采访中跟一个被采访者有过一个很棒的关于个人应该如何选择JavaScript框架的讨论。 他指出当一个主流软件公司开发他们的秘密核心代码时，一般都是为了大肆宣传自己。开发者一般都会这样暗自考虑：“这个公司写的JS跟我不太一样，而他们都是杰出并成功的。是否他们写JS代码的方式就比我的强？所以我必须适应他们？” 他们的秘密源代码也许非常......
-
十月知识记录
最近做镇魔曲手游项目，对做项目及注重交互又有了深一层的了解。这里学习并记录几个技能点，方便以后开发。 一、水波纹交互效果 鼠标交互效果：鼠标滑上去时出现水波纹由内往外扩张并逐渐消失。那这个效果是怎么实现的呢。 <div class="skill-slide"> <a href="javascript:;"></a> </div> .skill-slide a{ width:70px; height:70px; border-radius: 50%; ......
-
再聊PC页面适配
今年3月份写过一篇《聊聊PC端页面适配》文章，里面主要谈到一些对pc端页面做适配的看法以及方法（百分比和js检测）。最近在做劲舞团的官网，再次遇到了适配这个点，而且把适配要求提得更高点。所以这次咱们再来聊聊~ 适配考虑的方法主要还是之前文章说的两种，那么劲舞团官网遇到的适配新挑战是什么呢？ 1、需要适配的尺寸有明显的区间区分 2、不一样的布局和交互：横向双屏布局以及横向滚动切屏交互 先来个整体的布局示图： 适配区间分析 因为页面是分两屏的设计，这里的适配区间需要考虑两层：第一层是浏览器可视区域的大小变化下，页面左右两屏的宽度适配；第二层是当左右屏宽度发生变化后，左右两屏里面......
-
ECMAScript 2016 Language Specification (2)
#ECMAScript 2016 Language Specification (2) 正式进入内容部分了（翻译起来有点艰难，争取加快进度） ##1.Scope 这个规范定义了ECMAScript2016 通用编程语言 ##2.conformance(一致性) ECMAScript的一致性实现必须提供支持本规范中描述的所有类型，值，对象，原型，函数和程序的语法语义。 ECMAScript的一致性实现必须能理解Unicode V8.0.0或更高标准和ISO/IEC 10646所编码的源文件。 ECMAScript的一致性实现必须提供一个适应最新版本ECMA-402定义的， ......
-
大话西游手游官网改版总结
最近做大话西游官网改版，从先前的版本中学到了不少知识，总结了分享下 1、加载背景图片,把背景图放在showBg样式里 function loadBg(ele) { ele.each(function() { var $this = $(this); if ($this.hasClass('showBg')) { return } $this.addClass('showBg'); }) } 2、加载图片，把图片地址放在data-src属性里，如果存在data-src就放在sr......
-
JavaScript逗号运算符知多少
前不久看到一道挺有意思的题目，这次就围绕这个来写点东西~ 首先来看下这个东西~ var a = (1,2,3); console.log(a) 答案是什么？为什么？答对了么？第一次看到这个，会以为是报错，因为一直没见过这种写法，而且实际项目中几乎也没人这样写吧，也看不出有啥实际用途。结果这个出乎意料输出了一个数字 3。心想这就奇怪了，于是多试了几个例子，比如 a = (1,2,3,"s",5,"4")，初步得到结论是：这种写法是合法的，而且总会返回最后一个操作数的值。 然后，网上查资料，得知了一个关键词 —— “逗号运算符”。 先来看个......
-
ECMAScript 2016 Language Specification (1)
#ECMAScript 2016 Language Specification (1) 听从卡总教导，无论学习什么，至少找到你能找到的最官方的文档，然后把文档好好的读一遍（就当学英语），而不是百度一下然后看别人的博客。所以去找到了ECMA标准翻出了emca-262，准备从最基础的东西入手，反正总体而言也是看不懂，所以只能慢慢啃。 所以读着觉得可以开个超级大坑，慢慢更新，什么时候更新完我也不知道，反正应该是不会有人看的。本来准备开始读的时候还是ECMAScript2015 ，拖着拖着已经变成ECMAScript2016了，感觉如果我再拖下去就要变成ECMAScript2017了。所以......
-
微信小程序初试-----音乐Demo
微信小程序最近很火，所以我也来试试这个东东，看看它跟我们平时的Html5有什么区别？ 官方有提供下载和新建项目的教程，这里就不重复，可以先查看这里和下载：请猛戳我 项目文件目录结构 新建项目后，默认的如下 pages //所有页面(也可以叫窗口)存放的文件夹 |--index //默认显示的第一个页面(窗口) |--index.js //页面的脚本逻辑 |--index.wxml //页面结构内容 |--index.wxss //页面样式 |--logs......
-
ThreeJS学习笔记(五)——二维几何体元素及穿梭动画
二维几何体 ThreeJS可以创建三种二维几何体，包括CircleGeometry（圆形），PlaneGeometry（矩形），ShapeGeometry（自定义形状）。 创建二维几何体和创建三维几何体差不多,同样由形状和材质两个参数，拥有的属性也和三维几何体一样。 new THREE.Mesh(new THREE.PlaneGeometry(width, height, 1, 1 ),new THREE.MeshBasicMaterial(MaterialParam )); 需要注意的是，由于贴图的尺寸必须是(2的幂数)X (2的幂数)，如：1024*512，所以为了防止贴图变形......
-
ThreeJS学习笔记(四)——粒子系统
粒子和粒子系统 Threejs中制作粒子效果有两种方法： THREE.Particle和THREE.ParticleSytem 如果项目使用的渲染器是CanvasRenderer,直接使用THREE.Particle创建完粒子即可直接添加到scene中，但是如果使用的是WebGlRenderer渲染器，那就要先创建THREE.ParticleSytem对象，然后通过这个对象来创建粒子。PatricleSystem具有形体和材质两个属性，因此使用PatitlceSystem可以借助几何体生成粒子，也可以先创建一个由多个点构成的形体后去创建粒子。 THREE.Sprite ......
-
ThreeJS学习笔记(三)——三维空间用户交互与动画
拾取器raycaster ThreeJS提供了一个 raycaster的API用于返回用户光标所在位置的所有3维元素，它的实现原理是在屏幕上某个二维坐标点与相机位置和视角形成的向量方向上投射一条射线，返回与射线相交的所有三维物体的集合，集合的第一个物体为距离相机最近的物体，最后一个则为离相机最远的。 当使用拾取器去获取用户点击的物体时，需要事先将所有可参与用户交互的三维物体放到一个集合里。在创建拾取器后获取两个集合的交集，即当前用户在屏幕点击的位置上所有被设置为可被选择的物体，第一个即可视为用户直接点击的物体。 拾取器示例 以下代码段实现当用户鼠标移动到object1和object......
-
ES6学习笔记——类
在 ES6 之前，我们通过构造函数来创造一个类，并且通过原型来扩展属性： function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } Person.prototype.incrementAge = function () { return this.age += 1; }; 然后可以这样继承类： function Personal(name, age, gender, occupation, hobby) {......
