标签: jquery.panzoom

图像地图区域与panzoom和工具提示

有一个简单的图像地图,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)

jquery tooltipster jquery.panzoom

10
推荐指数
0
解决办法
382
查看次数

标签 统计

jquery ×1

jquery.panzoom ×1

tooltipster ×1