随笔分类 - 移动优先
摘要:为了获取客户、回馈客户,平台一般会推出抽奖活动类的营销页。因此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代码。...
阅读全文