<!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
今日推荐
周排行