Eason 2016-07-29

28

107766

之前我们写一些css3动画,每个语句都要写5遍有木有,-webkit-,-moz-......虽然我们可以复制，但是代码量一下子蹭蹭蹭就上去了，看得头晕，不简洁。还好我们小组有一个已经封装好_animation.less。 以下是几个loading栗子。 效果预览戳我戳我 第一个效果 <div class="loader-inner ball-clip-rotate"> <div></div> </div> .ball-clip-rotate > div { background-col......

其他

ubee 2016-07-29

28

124367

基本概念 此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点。 一个完整的3D环境包含以下元素: 1.场景(Scene)：是物体、光源等元素的容器， 2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机 3.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子 4.光源（Light）：包括全局光、平行光、点光源 5.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。 6.控制器(Control): 相机控件，可通过......

其他

gzheyunying 2016-07-28

36

115295

学习React的过程中，领悟到了一些基础要点，决定记录下来，以便以后阅读查看。 组件： 组件类首字母必须大写 var Hello = React.createClass({ render: function(){ return <h1>Hello ,{this.props.name}</h1> } }) ReactDOM.render( <Hello name="cxs" />, document.body ) this.props.children this.props对象......

JavaScript

xia 2016-07-26

43

134715

placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。然而PC端页面也常常需要用到这个属性，效果表现为当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。 要如何解决ie9以下浏览器无法支持的问题呢，可参考天下手游官网： http://tx.163.com/index.html 大概的代码如下： <form method="post" cl......

其他

小梦子 2016-07-26

55

167755

在移动前端制作中，我们会遇到垂直水平居中问题，下面介绍几种css3方法来解决； 1、CSS3的transform:translate 需要注意的是，这种写法会和其他transform样式有冲突，在某些情况下边缘和字体渲染会有问题 css .center{ width:50%; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webki......

CSS

邓~邓~ 2016-07-26

40

136052

CUTTERMAN是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。 cutterman界面及介绍 该界面是PC端切图，图片可以选择PNG、JPEG和GIF格式，PNG格式可以选择png24或者png8的，JPEG格式图片品质可以自己定义，默认60%，GIF格式品质分为32/64/128/256。 更重要......

工具

军 2016-07-25

153

164299

前言 很久很久以前，我们在做移动开发时，调试bug的方式主要是： 1、每次改完上传到测试环境，手机刷新（不够实时，麻烦耗时） 2、手机申请内网权限（申请的机子很有限，遇到奇葩机子出问题时再申请权限根本行不通） 然后，我们开始寻找可以实时远程调试的工具，比如weinre，小组也有相关文章介绍： Weinre+Gulp+BrowserSync结合实现远程调试 但我们小组最终选择的是内网穿透 ngrok 工具，统一搭配，方便组员快速使用，使用指南： 内网穿透 ngrok 工具使用指南 ngrok.bat 有了工具，那就得用上，提高生产力才对得住搭建这个工具的大神啊。但是用了那么多次，还是......

工具

xiaojiecong 2016-07-10

38

132074

感觉自己一向都挺依赖插件的，基础也比较差，很少自己尝试写点什么，于是这次就写了这个，逻辑比较简单，功能比较单一，还有待改进~ 查看demo>> 1、首先写个面向过程的程序，后面再逐步改写成面向对象程序 css .slide{width: 582px;height: 248px;position: relative;margin:20px auto 0;overflow: hidden;} .slide .banner{overflow: hidden;position: absolute;width: 582px;height: 248px;left: 0;} .s......

JavaScript

吱吱桑 2016-06-30

30

109967

一直循环听着周柏豪的走狗一边思考着，多年搬砖的自己码了那么多年的代码，还是会挖坑给自己跳，有些还是很低级的错误，于是，带着愤愤不平的情绪记录下以下的各种坑： 1.官方资讯的导航交互效果 这是一个会有展开效果的导航。嗯。看图。 然后鼠标移上去会有这么一个展开的动画效果。 刚开始接到这样的交互天真地以为很简单的，应该没什么问题的。万万没想到，稚嫩的我还是没有考虑到展开动画效果的时候会触发到鼠标的hover事件，然后再次展开下一个tab，一直就这样整个画面摇来摇去。嗯，要改。 第一反应就是加个标志给它，动画结束之前禁止掉一切的用户操作。呵呵，又有一个新的问题诞生，就是从第一个t......

总结

floyd 2016-06-30

35

143742

观察者模式，是设计模式中的一种，具体含义和说明，这里就不写了，可以执行百度，这里主要讲解如何使用？如何改善现有的代码逻辑？如何解耦？等问题 一、最简单的例子 $("#test").on("click",function(e){ alert("hi"); }); 这是jQuery中的监听元素的点击事件，然后做出响应；其实这就是观察者模式的运用；监听某个事件，让其它模块来响应你，可能光这么说，感受不出它的好处，看下面的实例。 二、常规的模块间调用 用一个比较直接的例子说明，每个游戏中，都有生命值这个概念，当生命......

JavaScript

瑶一瑶 2016-06-29

51

158064

最近做了一个全横屏的页面—— 劲舞团移动官网 分享一些要注意的地方。 1、根节点字体 当前我们移动端的根节点的字体大小是312.5%， 即16px*3.125=50px，此时编写css时，1rem=50px，网页100%宽度为7.5rem（375px/50）。我们是以屏幕的宽度为基准来计算的，可以用媒体查询来控制不同屏幕尺寸下的根节点字体大小，但是横屏时在部分手机上，媒体查询的高度和宽度仍然是以长的一边为高短的一边为宽，所以媒体查询失效。我们需要用js去控制根节点字体大小; if(window.orientation==90||window.orientation==......

其他

gzheyunying 2016-06-29

41

119952

近期为了练习react，自己写了一个Demo，功能很简单，展示员工信息列表，支持按性别和姓名筛选。效果如下： 默认： 筛选： 删除： 引用的文件如下： <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> 核心代码： <body&g......

其他

军 2016-06-27

44

140341

前言 最近在做一个游戏技能展示的效果，效果一般都有3s左右，鉴于效果复杂度只能通过逐帧或视频来实现展示。既然有两种实现方式，如何选择呢？先来简单分析下： 逐帧 所谓逐帧，就是把动画帧导出为图片，然后再用代码把没一帧的图片按照一定的频率进行切换，达到动画重组的播放效果。以3s的动画，每秒26帧的速度来计算，需要72张图片才能实现。同理如果帧数要求越高，需要的图片就越多。难度主要涉及到图片素材处理、图片资源加载、逐帧播放不掉帧等等 视频 视频这个没什么好说的，关键是看怎么播放。因为要达到的效果是看起来像一个页面动画而不是视频播放，所以要求是表面上看不出是视频播放即可。最大的难点也在于此......

JavaScript

xia 2016-06-27

40

141914

最近做项目经常与window.location.hash打交道，在这总结梳理下。 location.hash可以用来获取或设置页面的标签值，比如http://space.163.com/m/#about的location.hash="#about"。通过window.location.hash = hash 这个语句可以调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用，然后根据hash值的不同来显示不同的模块。 var hash; hash = (!window.location.hash) ? "#about" : win......

JavaScript

Eason 2016-06-16

17

107555

昨天做了一项目，添加礼包，以及礼包弹窗，弹出序列号以供用户手动复制，而坑便在这深埋了，苹果机竟然无法复制，安卓机挺正常的。项目 git链接在此 ，效果如下图： 无奈，最后在组长与军爷合力排查完美解决了，再次献上我的膝盖(～ o ～) 解决过程：把样式全部去掉，发现页面是可以复制的，接着一步步添加样式，这个过程也挺心累的！最后定位在一段小动画上 一个下拉指示按钮的动画上 @-webkit-keyframes upDown2 { 0% { bottom: 0.4rem; } 100% { bottom: 0.6rem; ......

其他