<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5 svg圆形世界地图热点动画展示特效</title>
<style>
body {
background-color: #153285;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/bodymovin.min.js"></script>
<div id="animationWindow"></div>
<script type="text/javascript">
var select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
animationWindow = select('#animationWindow'),
animData = {
wrapper: animationWindow,
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: 'world.json'
}, anim;
anim = bodymovin.loadAnimation(animData);
//anim.addEventListener('DOMLoaded', onDOMLoaded);
anim.setSpeed(1.4);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com" target="_blank">懒人</a></p>
</div>
</body>
</html>
