2016年11月
-
ES6在新图册组件中的应用
ES7都来了，然而我们连ES6都很少用到，基于ES6的不成熟，以及浏览器支持程度问题，导致大家都比较少使用得上它。不过目前日渐更新的浏览器，已经大面积支持ES6的新特性了，即使不支持，也可以使用Babel来进行转换为ES5来执行。此次就运用到Babel来编译，已集成到前端发布工具中，添加即可使用。 1、类定义 以前的做法： function ImageFall(param){ } ImageFall.prototype = {} 怎么看，都不像一个类，怪别扭 class ImageFall{ //构造函数 con......
-
吱吱说VR，你怕了吗？
首先，看下demo效果，扫一下下面的二维码： 主要利用浏览器的deviceorientation事件监视设备朝向，记录下其受地心引力作用下而在方向上产生变化的数据，然后使用DeviceOrientationControls.js（一个three.js的插件）让摄像头根据设备的移动进行调整，相当于模拟人看向物体的某个方向，犹如人的视线一样。最后，结合three.js来构建一个3d世界。 1. 画一个会动的太阳 引用three.js, 建立3个要素：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中，然后再画一个太阳。 ......
-
用requestAnimationFrame来代替setInterval
用requestAnimationFrame来代替setInterval 在高级浏览器中，我们用requestAnimationFrame这个方法来代替setInterval和setTimout来做定时器。 requestAnimationFrame的执行机制 目前的显示器大部分的PSF都是60帧/秒，即每1000/60 = 16.7ms刷新一次，如果setTimeout/setInterval设置的时间间隔小于16.7，那么就会出现过度绘制的问题。而requestAnimationFrame正是为了这个而出现的，它会跟着浏览器的绘制走，浏览器每次重绘会通知requestAnim......
-
关于函数声明与函数表达式的一些理解
通常我们定义函数会用下面两种写法： 1、函数声明 function test(){ //... } 2、函数表达式 var test = function(){ //... }; 表面上看没什么区别，实际上解析器会在执行任何代码前先读取声明，而函数表达式要等到解析器执行到它所在的代码行才会真正被执行。下面举个例子： var test = function() { console.log(2) }; function test() { //这个是函数声明，将会被提升 console.log(1); } test() 结果是输出2，这个代码片段会被......
-
阴阳师日本官网总结
1、最近做阴阳师日本官网，其中有个功能是获取预约人数，设计稿上的人数是这样151,567,000，想了想自己写还有点麻烦，于是网上copy了代码，再修改了下。 其中，有一点需要注意的是：函数中的str是字符串，所以需要把数字进行转成字符串，再传值。 function formatNum(str) { var newStr = "", count = 0; if (str.indexOf(".") == -1) { for (var i = str.length - 1; i >= 0; ......
-
sticky解决粘性交互在微信的问题
前言 粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动，而是处于屏幕某一固定位置，变成fixed状态，粘着屏幕某一边缘。这种交互经常用到一些导航，比如《大话西游》手游移动官网，效果请看下面动图示意： 这种交互的主要逻辑是：导航模块默认是普通流体布局，然后监听window的scroll事件，当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题，但是微信对scroll这高频事件做了处理，即使你绑定了scroll事件，在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的：......
-
JS学习笔记——实用的 JS 小技巧
1. 安全的串接字串 假设有一些不确定的变量类型，而你想将它们串接成字符串，这样可能会导致错误。 var one = 1; var two = 2; var three = '3'; var result = one + two + three; // 会得到 "33" 而非 "123" 可以用 concat 来串接字符串： var one = 1; var two = 2; var three = '3'; var result = ''.concat(one, two, three); // 得到 "123" 2.......
-
游戏内嵌项目小结
在做率土之滨的游戏内嵌官网时，花了不少时间，也踩了不少坑，本文来总结下，有些经验可以做为此类型项目的借鉴。后面有彩蛋！ 前言 内嵌页面，是指在某个app（游戏）里显示的网页，主要是通过app里面的webview（可以理解为一个浏览器）来展示我们做的网页。理论上内嵌页面和普通页面没多大区别，但是不同的app以及不同系统的app，内置的webview可能会不同，相当于不同的浏览器，所以也会出现一些兼容问题，而这里更头疼的是功能兼容问题，反而样式兼容变得更轻松点，因为不需要考虑各种浏览器（如果该页面只在app里面跑）。 开发过程 关于适配 内嵌页面和普通项目明显不同的表现形式就是横屏展示......
-
页面随鼠标位置而移动~
一个简单的交互，页面区块随鼠标移动而移动。 页面效果（第二屏）：http://test.nie.163.com/test_html/game.academy/open-day/201612/ 1.重温screenX、clientX、pageX 的区别 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 2.pageX 小d......
