2016年3月
-
CSS HACK 支持IE6|7|8|9|10|11
原则上真心不支持大家使用hack，能不用hack就不用hack，但到了实际操作的时候却不得不用到hack。 本文纯实例展示，来个参考DEMO，这样更加直观一点，不写那么多理论的东西了，理论的东西百度下就可以找到很多；我不生产代码，我只是代码的搬运工。 本文只写CSS HACK，html、js的HACK就不写了。是的，就是这么任性。 单独HACK实例 IE6 .a {_background:#aaa;} IE7|8 .b {*background:yellow;} IE7|8|9|10 .c {background:orange\9;} IE8|9|10|11 .d {back......
-
3D样式在“部分真机”的遮挡原因（跟z-index无关），导致点击不上绑定点击事件的元素
最近做的一个专题项目(梦幻西游-阳光魅力榜)，遇到一个3D效果样式导致的问题附上项目地址：http://my.163.com/2016/ygmlb/m/index.html 大概描述下问题： 移动端 3D效果样式（3D翻转效果）导致在“部分真机”上，元素绑定的click事件点击无效，并不是js绑定点击事件方法bug或者不支持的原因，而是点击元素被遮挡了（谷歌浏览器所有模拟机和其他真机测试没问题，在“三星某个型号手机” 和“华为P7手机”绑定点击事件元素被遮挡了。），遮挡问题跟z-index层次高低无关。 3D翻转效果HTML部分代码简化如下： <div cla......
-
小白带你探索WebP
WebP是什么鬼 WebP格式，一种新型的图片格式，其图片压缩体积大约只有JPEG的2/3，而且还能节省大量的服务器带宽资源和数据空间。 这么好的图片格式，如果能运用到实际项目中那就非常棒了。但是又碍于其兼容性问题，于是就有了这个webp fis插件的诞生，暂时叫它fis-postpackager-jpg-towebp。 WebP插件主要实现的功能 jpg --> webp （目前暂时仅处理jpg图片） 替换所有jpg引用（包括样式表里的和页面上的img标签，至于js里面的就不管咯） 判断是否支持webp，然后加载对应的图片格式 插件实现过程 一、选择fis插件的类型 大......
-
初探关于ajax多个请求，但需要全部完成后才能执行的方法
本文主要总结一下需要等待多个ajax请求完成后再执行操作的方法 最近在做一个英雄榜项目遇到一个问题，需要用到6次Ajax来获取各个榜单的数据再进行操作。 一、ajax嵌套ajax，传说中的嵌套金字塔，以及这种方式只能串联发起ajax请求 function getDataFun(){ $.ajax({url: "/equip_rank",type:'GET',dataType:'jsonp',success: function(data1){ $.ajax({url: "/score_rank&......
-
图片懒加载
Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src(也可以约定为其他属性名)属性的值，并赋予img的src，从而实现动态加载图片的机制。 这里需要注意的是： img在初始化的时候不要设置src属性，因为即使设置 src='' 浏览器也会尝试加载图片。 一个简单的图片懒加载共涉及两个方面: HTML 约定 给img元素添加class="m-lazyload",同时将img src赋值给data-src属性。 <img class="m-lazyload" data-src="imgUrl"......
-
浅谈NIE组件加载方式的变化和原理
这里主要会说说小组组件新旧加载方式的实现方式、优缺点，以及未来展望 旧的方式 一、调用方式： nie.use(["nie.util.share","nie.util.video"],function(){ //do something }); 典型的AMD加载方式，就是按需加载，异步回调，代表作：requirejs 二、实现原理： //以下为简单实现原理，并非代码全部 nie.use = function(modules,callback){ //定义异步请求组件js......
-
WEUI实践
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。 有时候希望做一些比较简洁、对样式没有特定要求的移动端页面，可以考虑直接使用。不过不知道能否通过组里QA同学的测试，将来等QA同学有空时可以安排测试。 以最常用的表单进行示例 信息填写页面： 提交成功页面： 两个页面只引用了库里的example.css文件和weui.css文件。 信息填写页面的代码如下： <!DOCTYPE html......
-
常用js汇总
这里收集了一些常用的js代码，拿出来跟大家分享 判断图片是否加载完 有时候你可能需要检查图像是否已经加载完成，以便继续执行相应的js代码 function loadImage1(url,callback){ var img = new Image(); img.onload = function(){ //图片加载完成后执行的操作 } img.src = url; } 图片按某个尺寸等比缩放 function img1(picW,picH,maxWidth,maxHeight){ var Ratio, wRat......
-
CSS3动画的一些小总结
总结的内容有的是一些平时自己遇到过的容易被忽略的，有的是个人觉得简单实用的，特此分享！ 1、过渡 简单的状态变化只用transition就可以方便地实现： transition-property： 规定应用过渡的 CSS 属性的名称； transition-duration：定义过渡效果花费的时间，默认是 0； transition-timing-function ： 规定过渡效果的时间曲线。 transition-delay： 规定过渡效果何时开始，默认是 0 在用的时候遇到一个问题，就是transition在动画退场时会有退场动画，相当于......
-
关于嵌套新闻发布系统的一些事
本文主要总结嵌套新闻发布系统遇到的一些问题及解决方法！ 一、移动端-新闻内页中嵌套新闻列表页 如下图，在该新闻内页里面还需要嵌套新闻列表页，并且两者都需要加载更多翻页功能 所以，在这种情况下，内嵌的列表页需要用ajax获取并且实现翻页加载更多功能，链接在此； var _nextHostList="http://stzb.test.nie.163.com/m/qyz/news_list", _nextHost="", _totalPagesList=1, _totalPages=1......
-
记天下手游移动官网踩的坑
周末两天加班制作天下手游移动官网。如下图 git地址为：http://git-wz.gz.netease.com/tx/tx-gw-m-16v1 地址：http://tx.163.com/index.html（在你看到的时候有可能会新版替换） 在制作过程一直到上线在ios下的动画表现都很顺畅。然而上线后第二天，就有编辑来说部分安卓机卡爆了。尝试去掉视差组件parallax.js，小米4卡的程度减轻，但是还是看不了首屏七字动画，而且小米note,红米依然卡。卡到每一次界面有动画就是直接以方格形式从下往上从左往右渲染出动画的最终画面，而看不到动画的过程。 没得说，开始找问题。......
-
聊聊PC端页面适配
PC端适配？什么鬼！！！做不了~ PC端适配？又不早说，都做完了，还适配毛线~ 页面有bug！！！！为什么我笔记本打开只看到一半~ ... 以前谈适配只会想到移动项目，而有时候转做pc端，有一个很爽的感觉就是什么的尺寸都可以写死，不需要担心设备尺寸不同的问题。但是现在越来越多的PC项目也有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。对于宽度，我们规范了主体内容在1200以内，高度只有个最小值规范。 为什么pc需要考虑适配 因为pc需要考虑最小设备主体是1366*768分辨率的14寸普通笔记本，768的高度减去浏览器工具栏和桌面任务栏，实际的可视高度只......
