<!DOCTYPE html> <html> <head> <title>MyHtml.html</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/common/jquery-1.8.3.js"></script> <style type="text/css"> #handle-map { position: fixed; right: 10px; top: 10px; z-index: 100; } #thump-map{ position: fixed; top: 10px; left: 10px; z-index: 100; font-size: 0; width: 20%; height: 20%; border: 1px solid blue; } #thump-map img{ width: 100%; height: 100%; } #radar{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid red; box-sizing: border-box; } html,body,#container,#wrapper-map,#map-div { width: 100%; height: 100%; margin: 0; padding: 0; } #map-div { position: relative; overflow: hidden; } #map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } </style> <script type="text/javascript"> { var isMouseDown_map = false, isMouseDown_radar = false;; var original_pos = {}, old_map_pos = {}; // 當前縮放比例 var _rate = 100; var $map, $radar; // 每次縮放比例 var _scale = _rate/5; // 最大,最小比例 var _MAX_ = 30*_scale, _MIN_ = 5*_scale; var _width, _height; } $(function() { _width = $('#map-div').width(); _height = $('#map-div').height(); $map = $('#map'); $radar = $('#radar'); $('#hide').click(function(){ if($(this).val()=='隱藏'){ $('#thump-map').hide(); $(this).val('顯示'); }else{ $('#thump-map').show(); $(this).val('隱藏'); } }); $('#big').click(scaleMap); $('#small').click(scaleMap); $('#handle-up').click(moveMap); $('#handle-down').click(moveMap); $('#handle-left').click(moveMap); $('#handle-right').click(moveMap); $map.add($radar).on({ 'mousedown': mouseDown, 'mouseup': mouseUp }); $map.mousemove(mouseMoveForMap); $radar.mousemove(mouseMoveForRadar); }); { // 地圖事件 function mouseUp(){ window['isMouseDown_'+this.id] = false; $(this).css('cursor', 'default'); original_pos = {}; old_map_pos = {}; } function mouseDown(e){ window['isMouseDown_'+this.id] = true; $(this).css('cursor', 'move'); original_pos.x = e.clientX; original_pos.y = e.clientY; old_map_pos.x = parseInt($(this).css('left')); old_map_pos.y = parseInt($(this).css('top')); } function mouseMoveForMap(e){ if (isMouseDown_map) { var moveX = e.clientX - original_pos.x; var moveY = e.clientY - original_pos.y; var left_ = old_map_pos.x + moveX; var top_ = old_map_pos.y + moveY; if(left_>0){ left_ = 0; }else if(left_<-_width*((_rate-100)/100)){ left_ = -_width*((_rate-100)/100); } if(top_>0){ top_ = 0; }else if(top_<-_height*((_rate-100)/100)){ top_ = -_height*((_rate-100)/100); } $map.css({ 'left' : left_ + 'px', 'top' : top_ + 'px' }); $radar.css({ 'left' : -left_*(20/_rate) + 'px', 'top' : -top_*(20/_rate) + 'px' }); } } function mouseMoveForRadar(e){ if (isMouseDown_radar) { var moveX = e.clientX - original_pos.x; var moveY = e.clientY - original_pos.y; var left_ = old_map_pos.x + moveX; var top_ = old_map_pos.y + moveY; var radarWidth = $radar.width(); var radarHeight = $radar.height(); if(left_<0){ left_ = 0; }else if(left_>(_width*.2-radarWidth-2)){ // 此處-2為radar的邊框 left_ = _width*.2-radarWidth-2; } if(top_<0){ top_ = 0; }else if(top_>(_height*.2-radarHeight-2)){ // 此處-2為radar的邊框 top_ = _height*.2-radarHeight-2; } $radar.css({ 'left' : left_ + 'px', 'top' : top_ + 'px' }); $map.css({ 'left' : -left_/(20/_rate) + 'px', 'top' : -top_/(20/_rate) + 'px' }); } } function scaleMap() { if ($(this).is('#big')) { _rate += _scale; } else { _rate -= _scale; _scale = -Math.abs(_scale); } if(_rate>_MAX_){ _rate = _MAX_; return; } if(_rate<_MIN_){ _rate = _MIN_; _scale = Math.abs(_scale); return; } var top_ = parseFloat($map.css('top')); var left_ = parseFloat($map.css('left')); $map.css({ 'width' : _rate + '%', 'height' : _rate + '%', 'left' : (left_ - _scale / 100 / 2 * _width) + 'px', 'top' : (top_ - _scale / 100 / 2 * _height) + 'px' }); $radar.css({ 'width' : 10000/_rate + '%', 'height' : 10000/_rate + '%', 'left' : -(left_ - _scale / 100 / 2 * _width)*(20/_rate) + 'px', // 此處20為小圖占大圖的比例 'top' : -(top_ - _scale / 100 / 2 * _height)*(20/_rate) + 'px' }); _scale = Math.abs(_scale); } function moveMap() { var direction = this.id; var top_ = parseInt($map.css('top')); var left_ = parseInt($map.css('left')); switch (direction) { case 'handle-up': top_ = top_ - 20; break; case 'handle-down': top_ = top_ + 20; break; case 'handle-left': left_ = left_ - 20; break; case 'handle-right': left_ = left_ + 20; break; } if(left_>0){ left_ = 0; }else if(left_<-_width*((_rate-100)/100)){ left_ = -_width*((_rate-100)/100); } if(top_>0){ top_ = 0; }else if(top_<-_height*((_rate-100)/100)){ top_ = -_height*((_rate-100)/100); } $map.css({ 'top': top_ + 'px', 'left': left_ + 'px' }); $radar.css({ 'top': -top_*(20/_rate) + 'px', 'left': -left_*(20/_rate) + 'px' }); } } </script> </head> <body> <div id="container"> <div id="wrapper-map"> <div id="thump-map"> <img src="thumb_map.jpg"> <div id="radar"></div> </div> <div id="handle-map"> <input type="button" id="hide" value="隱藏"> <input type="button" id="big" value="放大"> <input type="button" id="small" value="縮小"> <br> <input type="button" id="handle-up" value="上"> <input type="button" id="handle-down" value="下"> <input type="button" id="handle-left" value="左"> <input type="button" id="handle-right" value="右"> </div> <div id="map-div"> <img src="map.jpg" id="map" draggable="false" usemap="#factoryInfo"> <map name="factoryInfo" id="factoryInfo"> <area shape="poly" coords="200,0,300,0,300,150,200,150" href="javascript: alert()"/> </map> </div> </div> </div> </body> </html>
地图模拟
猜你喜欢
转载自com-niu.iteye.com/blog/2346291
今日推荐
周排行