-
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......
-
移动分页实现
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 ......
做有态度的前端团队
网易FEG前端团队
© 2024 FEG-做最好的前端_网易游戏网站服务部前端团队_有态度的互联网前端团队. 由 NetEase 倾情推出.