有一个简单的图像地图,tooltip点击时可以输入area/输出map:
var $section = $('.plan');
$('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(1)',
increment: 0.1,
minScale: 1,
contain: 'invert',
maxScale: 5,
focal: {
clientX: 0,
clientY: 0
},
onEnd: function(){
X();
}
}).panzoom('zoom', true);
$('map area').each(function(i,e){
// console.log( $(e).data('status') );
var data = $(e).data('maphilight') || {};
data.fillColor = 'db2205';
switch( $(e).data('status') ){
case 'sales':
data.fillColor = 'db2205';
data.strokeColor = 'db2205';
data.fillOpacity = 0.5;
break;
case 'free':
data.fillColor = '98c13c';
data.strokeColor = …Run Code Online (Sandbox Code Playgroud)