这个实验证明了SVG路径功能的KineticJS通过生成一个交互式地图从一个SVG数据源。
产品说明:鼠标悬停在这个国家
产品说明:鼠标悬停在这个国家
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#tango {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
}
#container {
background-image: url('http://www.html5canvastutorials.com/demos/assets/map-background.png');
display: inline-block;
overflow: hidden;
height: 262px;
width: 580px;
background-position: 1px 1px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<script src="http://www.html5canvastutorials.com/demos/assets/worldMap.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 260
});
var mapLayer = new Kinetic.Layer({
y: 20,
scale: 0.6
});
var topLayer = new Kinetic.Layer({
y: 20,
scale: 0.6
});
/*
* loop through country data stroed in the worldMap
* variable defined in the worldMap.js asset
*/
for(var key in worldMap.shapes) {
var path = new Kinetic.Path({
data: worldMap.shapes[key],
fill: '#eee',
stroke: '#555',
strokeWidth: 1
});
path.on('mouseover', function() {
this.setFill('#111');
this.moveTo(topLayer);
topLayer.drawScene();
});
path.on('mouseout', function() {
this.setFill('#eee');
this.moveTo(mapLayer);
topLayer.draw();
});
mapLayer.add(path);
}
stage.add(mapLayer);
stage.add(topLayer);
</script>
</body>
</html>
704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
