吱吱桑 发布的文章
-
Augmented Reality
噔噔！一个类似阴阳师现世抽卡的小demo，由于getUserMedia的兼容性问题，目前只有安卓手机可以看到...（建议拿一些高端点的安卓机） 玩法：扫左图的二维码后，点击允许访问摄像头后，再扫右边的二维码（相当于阴阳师里的召唤阵） 或者你也可以拿另外一台手机扫下面的码来显示召唤阵 下面探索一下其实现的原理，其中主要的交互包括： 开启摄像头 > 扫码 > 显示模型 转换为相对应的技术，奏是... · getUserMedia，开启摄像头获取设备的媒体信息 · OpenCv，js-aruco, 图像处理，识别二维码 · 画出3d模型，threejs，three......
-
吱吱说VR，你怕了吗？
首先，看下demo效果，扫一下下面的二维码： 主要利用浏览器的deviceorientation事件监视设备朝向，记录下其受地心引力作用下而在方向上产生变化的数据，然后使用DeviceOrientationControls.js（一个three.js的插件）让摄像头根据设备的移动进行调整，相当于模拟人看向物体的某个方向，犹如人的视线一样。最后，结合three.js来构建一个3d世界。 1. 画一个会动的太阳 引用three.js, 建立3个要素：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中，然后再画一个太阳。 ......
-
slide轮播 v1.0
重写slide插件，一个艰巨的任务，就这样在展开了。 目前只实现了简单的左右切换和渐隐渐现的切换效果，戳http://test.nie.163.com/test_html/test/test/slide/demo.html 而且功能还在测试中，后续会继续完善。 这里简单说一下前后循环的实现效果，就是当切换到最后一张时，如何继续自然地切换到第一张。 参考目前优秀的swiper插件，发现它实现得挺聪明的。它是在第一张和最后一张分别插入临近的tab页，然后再进行下一张切换的时候，快速切换到相邻的tab页，然后再完美实现过渡效果。 下面画个图展示一下具体步骤： 同理，上一个切换也是......
-
一个简单的卡片效果
具体效果点这里：http://xyq.test.nie.163.com/test/pics/index.html 一个简单的卡片切换效果，主要有以下功能 有4个切换的方向 动态加载数据 CSS3控制动画效果 动画的考虑 一开始是打算通过js动态地计算每个卡片的切换坐标以及动画移动的距离，无奈其计算量的复杂和繁琐，最终放弃了这一方案。 细细观察，你会发现其实每个卡片的位移以及切换出去的效果是一样的，所以完全可以固定写好每个卡片的初始样式，然后再通过js去动态地改变样式名。 所以，很愉快地就这样开始了样式的编写。 //通用 .poker-item { ......
-
学习笔记：编写高效的javascript（老司机请绕道）
偶尔写得很挫的代码会被鄙视，甚至会影响到用户的每一次操作，所以开始思考如何让自己码下的代码能在所有浏览器中最高效地执行。 下面是我最近在读的一本名叫《高性能网站建设进阶指南》的书的一些笔记，做下简单的分享。 一、学会管理作用域 当执行JavaScript代码时，JavaScript引擎会创建一个执行上下文，每个执行上下文都有一个与之关联的作用域链。JavaScript引擎会在页面加载后创建一个全局的执行上下文，然后每执行一个函数都会创建一个对应的执行上下文，同时会创建一个活动对象，并在初始化时给this、arguments、命名参数和该函数的所有局部变量赋值。 JavaScri......
-
记my官网改版遇到的自己挖的坑
一直循环听着周柏豪的走狗一边思考着，多年搬砖的自己码了那么多年的代码，还是会挖坑给自己跳，有些还是很低级的错误，于是，带着愤愤不平的情绪记录下以下的各种坑： 1.官方资讯的导航交互效果 这是一个会有展开效果的导航。嗯。看图。 然后鼠标移上去会有这么一个展开的动画效果。 刚开始接到这样的交互天真地以为很简单的，应该没什么问题的。万万没想到，稚嫩的我还是没有考虑到展开动画效果的时候会触发到鼠标的hover事件，然后再次展开下一个tab，一直就这样整个画面摇来摇去。嗯，要改。 第一反应就是加个标志给它，动画结束之前禁止掉一切的用户操作。呵呵，又有一个新的问题诞生，就是从第一个t......
-
这片云加了特效，Duang Duang Duang
首先，看下效果页面，感受一下。点我 是不是有点炫咧，这就是运用WebGL简单实现的效果，下面我们一起来看看代码吧。 Three.js 一个优秀的WebGL开源框架，官网地址https://github.com/mrdoob/three.js。点进去你会发现有好多酷炫的效果，而且基于这个库可以快速地写出3d程序。上面的镇魔曲手游官网的云海效果就是基于three.js实现的。 刚开始接触到Three.js，好多东西都是一头雾水的，然后官网的文档说明又是英文，阅读起来实在困难。在此强烈推荐一个中文基础教程，个人觉得对各种术语以及图形的构造和渲染理解起来相对简单些。英语厉害的同学可以忽略。......
-
小白带你探索WebP（下集）
上回说到如何判断浏览器是否支持webp。 可以通过加载一张比较小的webp格式的图来达到目的。 function check_webp_feature(callback) { var kTestImages = 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=='; var img = new Image(); img.onload = function () { var result = (img.width > 0) && (img.h......
-
小白带你探索WebP
WebP是什么鬼 WebP格式，一种新型的图片格式，其图片压缩体积大约只有JPEG的2/3，而且还能节省大量的服务器带宽资源和数据空间。 这么好的图片格式，如果能运用到实际项目中那就非常棒了。但是又碍于其兼容性问题，于是就有了这个webp fis插件的诞生，暂时叫它fis-postpackager-jpg-towebp。 WebP插件主要实现的功能 jpg --> webp （目前暂时仅处理jpg图片） 替换所有jpg引用（包括样式表里的和页面上的img标签，至于js里面的就不管咯） 判断是否支持webp，然后加载对应的图片格式 插件实现过程 一、选择fis插件的类型 大......
