网上沙盘(jquery)

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

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


文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 404
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭