2016年7月
-
图册组件优化之路（一）
根据六马系统需要，写了一个图册组件，方便给编辑器添加图册显示使用。 效果可以参考这里：http://game.163.com/2016/chinajoy/2016/07/29/22769_632281.html 匆忙发布了第一个版本出去，发现编辑们流行图册都发一两百张图上去的，由于没有做加载优化，导致问题很明显，一开始需要请求双倍的图片总数请求，页面存在多个图册，打开就会加载得很慢才出来，好多菊花满屏转 一、代码按需加载 图册兼容PC和移动两个web端，一般情况下，都是代码写一块，根据参数或者终端类型判断，来运行对应的代码 这样方式存在以下问题： 一个页面基本是不会存......
-
学习笔记：编写高效的javascript（老司机请绕道）
偶尔写得很挫的代码会被鄙视，甚至会影响到用户的每一次操作，所以开始思考如何让自己码下的代码能在所有浏览器中最高效地执行。 下面是我最近在读的一本名叫《高性能网站建设进阶指南》的书的一些笔记，做下简单的分享。 一、学会管理作用域 当执行JavaScript代码时，JavaScript引擎会创建一个执行上下文，每个执行上下文都有一个与之关联的作用域链。JavaScript引擎会在页面加载后创建一个全局的执行上下文，然后每执行一个函数都会创建一个对应的执行上下文，同时会创建一个活动对象，并在初始化时给this、arguments、命名参数和该函数的所有局部变量赋值。 JavaScri......
-
关于ajax异步获取服务器信息乱码情况
1、当客户端页面编码必须为gb2312时，ajax获取的信息显示为乱码 有时候有些项目需要include新闻发布系统某站点数据时，新闻发布系统该站点配置为gb2312编码的站点，此时，页面设置的编码必须为gb2312。但ajax异步获取的utf-8信息需要写入页面，与页面编码不一致，显示为乱码。（比如xy2某项目，同时需要include新闻数据，与接口返回的直播信息） 解决方法：添加ajax参数：scriptCharset:'utf-8'，使返回值以scriptCharset指定编码显示而不是默认以页面编码显示 js 代码： $.ajax({ url :......
-
浅尝模拟下拉框select
前言 本文主要模拟下拉框select控件 详情请戳参考页面：梦幻西游手游武神坛 模拟select主要实现目标 1.点击下拉框区域，下拉列表没显示则显示，有显示则收起来，下拉箭头样式有所改变； 2.鼠标hover下拉列表上面有对应的交互； 3.点击选择下拉列表的值，收起下拉列表，并且在下拉框区域显示选中的值； 4.有多个下拉框的时候，点击其它下拉框区域，其它兄弟下拉框没收起的先收起，同时展开当前下拉菜单； 5.点击窗口空白处，有下拉菜单没收起来的也收起来。 实现步骤 以下是实现的html代码 <div class="select-wrap j-select......
-
模仿网易新闻首页的滑屏切换
网易新闻移动版,试试左右滑动来切换新闻栏目，是不是如丝般顺滑？ 天下手游首页，也是模仿这种效果来做的，是不是也还可以（捂脸） 我们需要绑定touchstart,touchmove,touchend三个事件。支持H5的浏览器（移动端当然是都可以的）都支持以下绑定事件的方式——用handleEvent方法去区分不同的事件。 注：我们是在touchend事件触发的时候才会有左右滑屏。 //滑屏切换内容页 $("#main_container")[0].addEventListener('touchstart', touchHandle, f......
-
结合小组里_animation.less的几个Loading效果
之前我们写一些css3动画,每个语句都要写5遍有木有,-webkit-,-moz-......虽然我们可以复制，但是代码量一下子蹭蹭蹭就上去了，看得头晕，不简洁。还好我们小组有一个已经封装好_animation.less。 以下是几个loading栗子。 效果预览戳我戳我 第一个效果 <div class="loader-inner ball-clip-rotate"> <div></div> </div> .ball-clip-rotate > div { background-col......
-
Threejs学习笔记(一) 基础篇
基本概念 此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点。 一个完整的3D环境包含以下元素: 1.场景(Scene)：是物体、光源等元素的容器， 2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机 3.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子 4.光源（Light）：包括全局光、平行光、点光源 5.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。 6.控制器(Control): 相机控件，可通过......
-
React学习笔记
学习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对象......
-
使用jQuery快速解决IE9以下浏览器无法支持input的placeholder属性的问题
placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。然而PC端页面也常常需要用到这个属性，效果表现为当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。 要如何解决ie9以下浏览器无法支持的问题呢，可参考天下手游官网： http://tx.163.com/index.html 大概的代码如下： <form method="post" cl......
-
关于移动端垂直居中对齐的几个方法
在移动前端制作中，我们会遇到垂直水平居中问题，下面介绍几种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......
-
CUTTERMAN 一款神奇的切图工具
CUTTERMAN是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。 cutterman界面及介绍 该界面是PC端切图，图片可以选择PNG、JPEG和GIF格式，PNG格式可以选择png24或者png8的，JPEG格式图片品质可以自己定义，默认60%，GIF格式品质分为32/64/128/256。 更重要......
-
内网穿透ngrok工具快速启动bat
前言 很久很久以前，我们在做移动开发时，调试bug的方式主要是： 1、每次改完上传到测试环境，手机刷新（不够实时，麻烦耗时） 2、手机申请内网权限（申请的机子很有限，遇到奇葩机子出问题时再申请权限根本行不通） 然后，我们开始寻找可以实时远程调试的工具，比如weinre，小组也有相关文章介绍： Weinre+Gulp+BrowserSync结合实现远程调试 但我们小组最终选择的是内网穿透 ngrok 工具，统一搭配，方便组员快速使用，使用指南： 内网穿透 ngrok 工具使用指南 ngrok.bat 有了工具，那就得用上，提高生产力才对得住搭建这个工具的大神啊。但是用了那么多次，还是......
-
写个简单的基于jq的轮播图插件
感觉自己一向都挺依赖插件的，基础也比较差，很少自己尝试写点什么，于是这次就写了这个，逻辑比较简单，功能比较单一，还有待改进~ 查看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......
