清风轩

清风轩居 - 引仙阁


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于

  • 花园
  1. 1. 宇成朝阳广场页面
  2. 2. 图片转Base64编码工具
  3. 3. 风华60年投票活动分类入口
  4. 4. 一个错视的旋转动画
  5. 5. 一个自适应菜单导航页面
  6. 6. 移动端下拉刷新操作
  7. 7. Less在线编写

这里存放一些自己设计过的页面,仅此而已。


宇成朝阳广场页面

  • 全屏滚屏方式,引用fullpage
  • 自定义动画,翻屏提示条、翻屏时的特效、播放音乐时的无限旋转等
  • 首屏自动播放的slide
  • 播放音频。BGM为7AND5的作品A is A,版权归原作者所有。该文件进行过压缩,码率降低为32kbps。
  • 侧边栏导航:上一屏、下一屏、目录

之前的宇成朝阳广场手机端页面重构而来。
调用的fullpage有坑:在移动端开启触摸滚屏功能时内容超出部分不可自动滚动查看,链接无法愉快的点击触发。详情可自行前往github页面搜索issue。
修正方案:取消触摸功能;引入jQuery的swipe事件类库监听触屏滑动事件;在内容超出的滚屏页面,加入一个“查看更多”,点击后提取内容并进行覆盖弹出。
引用的两个jQuery插件分别为jquery.event.move和jquery.event.swipe
如果你需要更加完善的滚动效果,请使用Alvaro Trigo编写的功能强大的fullPage.js进行替代。

该demo页面仅作演示,严禁转载,其内图片与文字有版权,请勿盗用。


图片转Base64编码工具

  • 使用了URL对象和FileReader对象。
  • 支持图片文件的编码
  • 实时预览图片
  • 计算图片的大小

风华60年投票活动分类入口

  • 背景图片自适应宽高。顶部与底部有固定模块
  • nth-child伪类的使用。
  • tranform:ratote实现返回的尖角小箭头。
  • 主背景图图片仅作测试,经过高强度压缩。

一个错视的旋转动画

通过一组直线动画营造一种旋转动画的错视。雄兔脚扑朔,雌兔眼迷离。双兔傍地走,安能辨我是雄雌。本示例仅作演示,请使用现代浏览器访问部分浏览器可能会有兼容性问题。可点击演示界面的错视演示按钮观看演示。


一个自适应菜单导航页面

实现的需求如下:在屏幕宽度较小时,菜单为横向可滑动;屏幕较宽时则变为拉伸充满整屏。知识点:横向滚动,媒体查询,弹性布局。详细说明请访问一个自适应菜单导航页面。

移动端下拉刷新操作

没什么好解释的,原生JS实现的下拉刷新操作插件。No dependency。项目地址:PullRefresh

Less在线编写

Less在线编写,页面转自:http://less2css.org/

  • 目前只支持固定版本的切换2.5.3
  • 使用了system.js和aurelia
xovel

xovel

缓缓之间,风云静变

73 日志
18 分类
177 标签
RSS
github hdk4.com
Creative Commons
© 2016 - 2021 xovel
由 Hexo 强力驱动
主题 - NexT.Mist