分类 其他 下的文章
-
关于数据整理和海外分享的总结
制作页面经常遇到编辑丢一份表格或者word文档过来，这时就需要我们整理数据，为了方便后续的修改，整理成以下数据： var arr = { 'my': { 'name':'【回合】', 'example':'我的回合，我的回合，时间是一条不能倒流的河。', 'from':'《梦幻西游》手游' }, 'dtws':{ 'name':'【PK】', 'example':'物资pk:为团而生，为团而死。, 'from':'《大唐无双零》' }, 'dty......
-
判断iframe是否加载完成小结
在做大话西游经典版新闻内页，有个功能是滚动条下拉到一定位置，自动加载下一篇新闻，由于编码问题，采用了不同的加载下一篇新闻的方式。 页面效果：http://xy2.163.com/news/news/20161129/15205_658163.html 关于编码引起的问题 页面最终显示的编码是有一下四个因素共同决定的： 1）HTTP Header中的"Content-Type"项，服务器端返回编码设置 2）html代码中的meta标签 3）页面文件的保存编码 4）请求服务器设置的编码 HTTP Header中的"Content-Type"......
-
页面随鼠标位置而移动~
一个简单的交互，页面区块随鼠标移动而移动。 页面效果（第二屏）：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......
-
Why We Chose Vue.js
##Why We Chose Vue.js 翻译一篇来自gitlab官方博客所写的文章作为vuejs的介绍推荐。个人觉得vuejs是一个非常值得学习的框架。 原作者 Jacob Schatz 原文链接 Why We Chose Vue.js 我几周前在采访中跟一个被采访者有过一个很棒的关于个人应该如何选择JavaScript框架的讨论。 他指出当一个主流软件公司开发他们的秘密核心代码时，一般都是为了大肆宣传自己。开发者一般都会这样暗自考虑：“这个公司写的JS跟我不太一样，而他们都是杰出并成功的。是否他们写JS代码的方式就比我的强？所以我必须适应他们？” 他们的秘密源代码也许非常......
-
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")，初步得到结论是：这种写法是合法的，而且总会返回最后一个操作数的值。 然后，网上查资料，得知了一个关键词 —— “逗号运算符”。 先来看个......
-
微信小程序初试-----音乐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......
-
负margin小结
关于负margin 对负边距使用恰当的话，其实它是具有非常强大的属性的，以下是几条关于负margin需要注意的地方： 负边距是绝对标准的css，并不是一种hack的方法 当没有使用浮动时，负边距不会破坏页面的文档流 浮动会影响负边距的使用，因此使用负边距的时候要小心 使用负边距，做了几个小demo 1.两个设置了固定高宽的div，分别是A,B 2.A设置margin-left为负值,如图A元素向左移了10像素 3.A设置margin-top为负值,如图A元素向上移了10像素,其父元素也向上移了10px 4.A设置margin-bottom为负值时，A并不会像你想的那样往下......
-
slide轮播 v1.0
重写slide插件，一个艰巨的任务，就这样在展开了。 目前只实现了简单的左右切换和渐隐渐现的切换效果，戳http://test.nie.163.com/test_html/test/test/slide/demo.html 而且功能还在测试中，后续会继续完善。 这里简单说一下前后循环的实现效果，就是当切换到最后一张时，如何继续自然地切换到第一张。 参考目前优秀的swiper插件，发现它实现得挺聪明的。它是在第一张和最后一张分别插入临近的tab页，然后再进行下一张切换的时候，快速切换到相邻的tab页，然后再完美实现过渡效果。 下面画个图展示一下具体步骤： 同理，上一个切换也是......
-
safari几个小bug及番外
1、input 输入框的内容在 Safari 浏览器下光标的显示问题 输入内容后，光标靠上，未居中。在其他浏览器正常。 一般样式是这样写的： width：434px; height:54px; line-height:54px; text-align: center; 解决方案 把高度居中用padding设置 width:434px; height:24px; line-height: 24px; padding:15px 0; text-align: center; 2、一个按钮（a标签）在 safari 浏览器下不显示为“小手” 页面git》》 <a class......
