#Spread.js
基于移动设备的原点扩散交互特效
插件只针对移动设备,因此demo需要在chrome开发者工具的device toolbar下调试
###引用文件目录
目前版本基于手淘移动端适配方案flexible.js,后续会重构不依赖任何库; 同时,因为是基于移动设备,建议使用normalize.css初始化浏览器样式;
scripts/
├── flexible.js
└── spread.js
less/
└── demo.less
###引入插件库
<script src="/path/to/flexible.js"></script>
<link rel="stylesheet" href="/path/to/demo.css">
<script src="/path/to/spread.js"></script>
###插件使用
HTML:
<section id="container">
<!-- 被覆盖在下层的图片 -->
<img class="img-blow" src="../image/female-cover.png" alt="img-blow">
<!-- 覆盖在顶层的图片 -->
<div id="img-cover">
<img id="img-self" src="../image/male-cover.png" alt="img-cover">
</div>
</section>
Javascript:
var spread = new Spread({
// 覆盖在下层图片的宽度,单位:rem
'imgWidth': 8,
// 覆盖在下层图片的长宽比
'imgRatio': 550/306,
// 圆覆盖层的最终transform宽度,单位:rem
'cycleFinalWidth': 15,
// 最外层container的top(or margin-top)值,单位:rem
'containerTop': 0,
// 最外层container的left(or margin-left)值,单位:rem
'containerLeft': 1,
// transition持续时间,单位:s
'time': 1,
// 圆覆盖层div的id
'cover': 'img-cover',
// 覆盖在下层图片的id
'below': 'img-self',
// 最外层元素id
'container': 'container',
// 收缩事件触发按钮id
'reset': 'reset'
});
spread.Run();
less:
// 图片宽度
@img-width: 8rem;
// 图片长宽比
@img-ratio: 550/306;
Browser support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 8+