预览模式: 普通 | 列表

网上沙盘(jquery)

 http://www.contactu.cn/2017/sp/demo2.html

 
适用场景:
一个全屏背景+自适应前景点的例子。窗口尺寸随便怎么变化都行。特别适合用于制作全屏沙盘类的案例。
 
原理:
根据容器尺寸,计算背景图、前景点的位置,前景利用css的transform-scale/translate子属性进行自适应。实际使用中,是用了我熟悉的tweenMax实现了快速转换,否则要用css的Matrix矩阵滤镜,俺不熟。
 
使用方法:
在设计稿中测量背景图尺寸,所有点的位置点。按我的例子放置,即可。
 
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 284