随笔分类 -  移动优先

摘要：为了获取客户、回馈客户，平台一般会推出抽奖活动类的营销页。因此web页面中，有各式各样的抽奖效果。 格子式(九宫格)，背景滚动式(数字/文字/图案)，旋转式(转盘)，游戏式(砸蛋/拼图...)...... 这里来讲解下转盘抽奖效果。 当用户进入这个抽奖页面时，一般会“华丽”的设计所吸引，虽然明知中奖 阅读全文

摘要：在移动web，特别是在微信中，经常看到一种翻页动画效果，也称为场景动画。 一页一页的翻过，像在看书，每页的内容以各种"炫酷"的效果出现在你的眼里，配上一首动听的音乐，你有没有喜欢上呢。 这里没有音乐，没有炫酷的出场，只有实实在在的翻页。 先看看效果（如果不能查看复制下面的代码保存在本地查看... 阅读全文

摘要：在web开发中经常会用到像alert这样的弹出消息，每个浏览器自带的消息弹出框都不相同。为了统一外观，实现自定义的功能，动手写一个弹出框插件。 对弹出框的实现要求如下： 1. 仿照IOS系统弹出外观 2. 自定义按钮文字 3. 宽高自适应(有最小宽、最大宽限制) 4. 实现弹出框关闭（前、后）的回调 阅读全文

摘要：百分比圆环进度条 ----------------------------------------------------------- 柱状排行榜统计图 ----------------------------------------------------------- 饼状数据统计... 阅读全文

摘要：在web页面上图片切换（焦点图）效果实在是太常见了，PC端、移动端到处都有它的身影。 上次写了个tab选项卡的效果，在这里延续一下，改成图片切换的效果。 如果不需要自动播放，稍微修改下html标签、和css样式，tab选项卡JS里动画持续时间、去掉点击切换事件部分就可以了。 html ... 阅读全文

摘要：平常做移动端会用到tab选项卡，这和PC端有些区别，移动端是触摸滑动切换，PC端是点击、移入切换。 这里滑动切换就是一个移动端事件的应用，这里主要用到的触摸事件：touchstart、touchmove、touchend。 和做其他的效果一样，先有html结构，css样式修饰，再写JS代码。... 阅读全文