标签：
//预览地址： http://mall.3d414.com/suc/index.html
说明：电脑端通过操纵tabindex 键操作右侧信息栏目
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge,chrome=1" />
<!--<meta name="viewport" content="width=device-width,maximum-scale=0.5,user-scalable=no,minimal-ui" />-->
<meta content="width=1024, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>趣搭大中华地区分布图</title>
</head>
<body>
<style type="text/css">
@charset "utf-8";
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p {margin:0;padding:0;}
body,button,input{font-family:‘Microsoft YaHei‘,"微软雅黑","宋体", Arial, Tahoma, "Times New Roman"; font-size:12px;word-wrap:break-word; color:#666; background-color:#none;}
html {-webkit-text-size-adjust: none; }
a{text-decoration:none;cursor:pointer;color:#666;}
a:hover{color:#999;color:#e90000;cursor:pointer;}
a:active,a:focus{outline:0; star:expression(this.onFocus=this.blur()); }
i,em{font-style:normal;font-weight:normal;}
ol,ul ,li,menu{list-style: none; margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{font-weight:normal; font-size:100%;}
img{border:0; margin:0;}
:-moz-placeholder { color: #9f9f9f;}
::-webkit-input-placeholder { color: #9f9f9f;}
:-ms-input-placeholder { color:#9f9f9f; }
.clearfix:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
.clearfix{*zoom:1;}
.fl{float:left; display:inline;}
.fr{float:right; display:inline;}
.clearfix:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
.clearfix{*zoom:1;}
html{ height:100% !important; overflow:hidden !important;}
body{
background:#fff ; margin:0; width:100%; height:100% !important; overflow:hidden !important;
_background-image: url(about:blank); /*用浏览器空白页面作为背景*/
background-attachment:fixed; /* 确保滚动条滚动时，元素不闪动*/
text-overflow:ellipsis;
min-height:100%;}
/*----------------------------------整体网站框架布局------------------------------------------------*/
#wrap{ width:100%; height:980px; position:relative; overflow:hidden !important; }
#container{width:80% ;height:100%; overflow:hidden !important; border:0; position:absolute; left:0; top:0; -webkit-box-sizing:border-box;box-sizing:border-box;}
#rightItem{ width:20%; height:100% !important; overflow:hidden !important; position:absolute; right:0px; top:0 !important;-webkit-box-sizing:border-box;box-sizing:border-box; border-left:1px solid #999; z-index:888;/*-webkit-box-shadow:0 0 7px rgba(0,0,0,0.3);box-shadow:0 0 5px rgba(0,0,0,0.7);*/}
#rightItem h1{ height:40px; line-height:40px; width:100%; border-bottom:1px solid #ddd; overflow:hidden;background:#666; border-left:1px solid #999; margin-left:-2px; position:relative !important; z-index:666; -webkit-transform:translateZ(0)}
#arrows{ width:0; height:0; position:absolute; left:0; top:10px;line-height: 0px;border-bottom: 10px solid #666;border-left: 10px solid #999;border-top: 10px solid #666;}
#rightItem h1 a{height:40px; line-height:40px; width:95%; padding-left:5%; font-size:19px; background:#666; color:#fff; display:inline-block; float:left; }
#retunrs{ position:absolute; right:20px; top:0px; color:#fff; font-size:14px; display:none;}
#rightItemUl{ width:100%; height:auto; min-height:500px; position:absolute; left:0; top:41px !important; -webkit-transition:transform .5s ease-in-out;transition:transform .5s ease-in-out; z-index:3; clear:both;}
#rightItemUl li{ float:left; display:inline; width:100%; height:auto; background:#eee; color:#666; margin-bottom:1px; }
#rightItemUl li h2{height:35px; line-height:35px; font-size:18px; color:#333; background:#e6e4e4; }
#rightItemUl h2 a{height:35px; line-height:35px; width:96%; display:block; padding-left:4%;}
#rightItemUl h2 a:focus{background:#999; -webkit-transition:background-color .3s; transition:background-color .3s; color:#fff;}
#rightItemUl img{ width:100px; float:left; margin-right:10px;}
#rightItemUl h3{ line-height:18px;}
#rightItemUl p{ line-height:20px;float:left; width:98%; text-indent:4em; }
#rightItem .hide{ padding-left:4%; margin:10px 0; float:left; }
#rightItem .hide img{ display:none !important}
#rightItem .info{ float:left; width:240px;}
#rightItem .info h3{ width:100%; float:left;}
#rightItem .info strong{ width:48px; display:block; float:left; text-align:justify; justify:inter-ideograph; word-wrap:break-word; word-break:break-all; }
#middelInfo{ position:absolute; left:55px; top:35px; width:auto; min-width:230px; height:auto; overflow:hidden; padding:10px 15px; background:rgba(65,40,89,0.85); z-index:88;}
#middelInfo em{ font-size:22px; color:#fff; float:left; margin-top:-2px; }
#changeText{ font-size:19px; color:#FFF; float:right; margin:1px 10px 0 10px; }
#allCount{ padding:5px; padding-right:0; color:#fff; margin-left:7px; margin-top:11px;font-size:20px;}
#logo{ width:135px; float:left; margin-right:15px;margin-top:2px; margin-left:3px; }
#sexyButton{ position:absolute; left:55px; top:10px; border:1px solid #666; background:#666; color:#fff;}
#r-result{width:100%; }
#footer{ width:77%; height:45px; line-height:46px; background:rgba(0,0,0,0.25); color:#fff; position:absolute; left:0; bottom:0; padding:0 2%; overflow:hidden;}
#footer_div{ position:absolute; left:0; bottom:1px;height:42px; line-height:42px; width:80%; background:#fff;background:rgba(255,255,255,0.90); color:#412859;}
#scrollTxt{ position:absolute; left:0; bottom:1px;height:42px; line-height:43px; width:100%; background:#fff;background:rgba(255,255,255,0.93); color:#4a1d70;-webkit-transform:translateZ(0);font-size:17px;}
.BMap_bubble_content{ font-size:18px !important; color:#683c8f !important; text-align:center;}
#container .BMap_bubble_title{color: #999;font-size: 13px;text-align: center; text-shadow:0 0 2px rgba(0,0,0,0.2)}
</style>
<div class="wrap" id="wrap">
<div id="container" ></div>
<button id="sexyButton" style="visibility:hidden">启动全屏</button>
<div id="r-result"></div>
<div id="middelInfo">
<!-- <img src="img/logo.png" id="logo">-->
<em>趣搭</em><i id="allCount">23省市之</i><span id="changeText">大中华分布图</span>
</div>
<div id="footer">
<marquee id="scrollTxt" scrollamount="1" scrolldelay="3" behavior="scroll" onMouseOut="this.start()" onMouseOver="this.stop()">上海趣搭网络科技有限公司是一家专注于服饰鞋帽类的B2C电子商务企业，公司拥有先进的核心技术，强大的管理团队，以实现消费者“线上轻松选购的同时，提升自身对美的品读，培养绿色消费理念。”为目标。</marquee>
<!-- <div id="footer_div">（scrolldelay="3" 这边滚动电视机上还是有点卡）上海趣搭网络科技有限公司是一家专注于服饰鞋帽类的B2C电子商务企业，公司拥有先进的核心技术，强大的管理团队，以实现消费者“线上轻松选购的同时，提升自身对美的品读，培养绿色消费理念。”为目标。</div>-->
</div>
<div class="rightItem" id="rightItem">
<h1><i id="arrows"></i><a tabindex="0" class="oa">趣搭大中华分布图</a><span id="retunrs">返回主图</span></h1>
<ul id="rightItemUl" >
<li>
<h2 ><a tabindex="1" class="oa" >上海总部</a></h2>
<div class="hide">
<div class="info">
<h3><strong>总 部：</strong>上海趣搭网络网络科技有限公司</h3>
<h3><strong>联系人:</strong></h3>
<h3><strong>电 话：</strong>021-52685038</h3>
<h3><strong>地 址：</strong>上海市嘉定区沙河路66号2-6</h3>
</div>
<p>趣搭行政销售中心</p>
</div>
</li>
<li>
<h2><a tabindex="2" class="oa" >杭州分部</a></h2>
<div class="hide">
<div class="info">
<h3><strong>技术部:</strong>杭州趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong></h3>
<h3><strong>电 话：</strong>021-52685038：</h3>
<h3><strong>地 址:</strong>上海市嘉定区沙河路66号2-6</h3>
</div>
<p>杭州分布是整个趣搭科技的技术核心部门。该分部总共拥有30多个...</p>
</div>
</li>
<li>
<h2><a tabindex="3" class="oa" >湖北省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>武汉市趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong> 缪竞驰 </h3>
<h3><strong>电 话：</strong> 18171273330 </h3>
<h3><strong>地 址:</strong> 武汉市江汉区淮海路泛海国际 </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="4" class="oa" >山东省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>青岛趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong> 洪鲁峰</h3>
<h3><strong>电 话：</strong> 18580450888 </h3>
<h3><strong>地 址:</strong> 山东省青岛市保税区北京路63号天智大厦23-D,10-E </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="5" class="oa" >江苏无锡地区</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>无锡万美奇商贸有限公司</h3>
<h3><strong>联系人:</strong> 孙女士</h3>
<h3><strong>电 话：</strong> 18961682115 </h3>
<h3><strong>地 址:</strong> 江阴市云亭街道大元里路9号</h3>
</div>
<p>无锡万美奇商贸有限公司</p>
</div>
</li>
<li>
<h2><a tabindex="6" class="oa" >湖南省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>湖南趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong>胡启波 </h3>
<h3><strong>电 话：</strong> 18073118788 </h3>
<h3><strong>地 址:</strong> 湖南省长沙市车站北路万象企业公馆1309号</h3>
</div>
<p>湖南趣搭网络科技有限公司</p>
</div>
</li>
<li>
<h2><a tabindex="7" class="oa" >浙江省（除嘉兴）</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>浙江趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong>：400-088-3414 </h3>
<h3><strong>地 址:</strong> 杭州市滨江区江南大道1088号中南国际大厦17A层</h3>
</div>
<p>浙江趣搭网络科技有限公司</p>
</div>
</li>
<li>
<h2><a tabindex="8" class="oa" >江西省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>南昌趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong> 谢红平</h3>
<h3><strong>电 话：</strong> 13077933390</h3>
<h3><strong>地 址:</strong> 南昌市红谷滩万达广场A3写字楼1105号</h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="9" class="oa" >云南省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>云南魔购网络科技有限公司</h3>
<h3><strong>联系人:</strong> 梁澜</h3>
<h3><strong>电 话：</strong>18616593666 </h3>
<h3><strong>地 址:</strong> 昆明市西山区兴苑路秋苑小区秋水台31栋2单元602室</h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="10" class="oa" >重庆市</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>重庆趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong> 胡启佳</h3>
<h3><strong>电 话：</strong> 15922655588</h3>
<h3><strong>地 址:</strong> 重庆市九龙坡区石桥铺华宇名都1-17-2 </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="11" class="oa" >重庆市</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>重庆威斯嘉贸易有限公司</h3>
<h3><strong>联系人:</strong>胡抒瑶</h3>
<h3><strong>电 话：</strong> 18375834841</h3>
<h3><strong>地 址:</strong>重庆市渝北区汽博中心线外城市花园11栋31楼</h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="12" class="oa" >辽宁省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>黑龙江</h3>
<h3><strong>联系人:</strong>于海臣</h3>
<h3><strong>电 话：</strong> 18704032222 </h3>
<h3><strong>地 址:</strong> 沈阳市浑南新区营盘北街3号七星公馆</h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="13" class="oa" >吉林省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>黑龙江</h3>
<h3><strong>联系人:</strong>于海臣</h3>
<h3><strong>电 话：</strong> 18704032222 </h3>
<h3><strong>地 址:</strong> 沈阳市浑南新区营盘北街3号七星公馆</h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="14" class="oa" >黑龙江</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>黑龙江</h3>
<h3><strong>联系人:</strong>于海臣</h3>
<h3><strong>电 话：</strong> 18704032222 </h3>
<h3><strong>地 址:</strong> 沈阳市浑南新区营盘北街3号七星公馆</h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="15" class="oa">厦门分部</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>杭州趣搭网络科技有限公司</h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="16" class="oa" >四川省分公司</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>四川省分公司</h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="17" class="oa" >陕西省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>陕西省分公司</h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="18" class="oa" >宁夏自治区</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>宁夏分公司</h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="19" class="oa" >安徽省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong>宁夏分公司</h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="20" class="oa" >河北省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong></h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="21" class="oa" >河南省</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong></h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="22" class="oa" >江苏省（除无锡）</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong></h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="23" class="oa" >天津市</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong></h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
<li>
<h2><a tabindex="24" class="oa" >浙江嘉兴地区</a></h2>
<div class="hide">
<div class="info">
<h3><strong>分公司:</strong></h3>
<h3><strong>联系人:</strong> </h3>
<h3><strong>电 话：</strong> </h3>
<h3><strong>地 址:</strong> </h3>
</div>
<p>简介</p>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KiVzw6fvhWpwBIRAkseNTEyG"></script>
<script type="text/javascript">
//var json_location_coordinate=‘{[[121.483752, 30.92334],[120.093752,30.14334],[118.040294,24.264695],[104.670294,30.624695]}‘;
var json_data = [
[121.483752, 30.92334], //上海0
[120.15225,30.285038], //杭州1
[114.253023,30.606752], //湖北6
[120.182495,35.990834], //山东9
[120.345895,31.855827], //江苏无锡10
[113.017074,28.206854], //湖南11
[120.195805,30.202391], //浙江出嘉兴 13
[115.85468,28.696941], //江西15
[102.676036,25.044584], // 云南 16
[106.577701,29.648418], // 重庆 18
[106.493183,29.540292], // 重庆19
[123.459159,41.750905], // 辽宁 20
[125.353852,43.88234], // 吉林 21
[126.633852,45.75234], // 黑龙江 22
[118.040294,24.264695], //厦门2
[104.670294,30.624695], //四川3
[112.530294,37.874695], //陕西4
[106.270294,38.474695], //宁夏5
[117.27000,31.864695], //安徽7
[114.535857,38.04911], //河北8
[114.48100,38.034695], //河南8
[120.25820,31.296695], ///江苏除无锡12
[117.214752,39.13334], //天津14
[120.173752,30.19934] // 浙江嘉兴 17
];
var json_location_text="{‘text0‘:‘上海趣搭网络科技总部‘,‘text1‘:‘杭州技术中心‘,‘text2‘:‘武汉市趣搭网络科技有限公司‘,‘text3‘:‘青岛趣搭网络科技有限公司‘,‘text4‘:‘无锡万美奇商贸有限公司‘,‘text5‘:‘湖南趣搭网络科技有限公司‘,‘text6‘:‘浙江趣搭网络科技有限公司‘,‘text7‘:‘南昌趣搭网络科技有限公司‘,‘text8‘:‘云南魔购网络科技有限公司‘,‘text9‘:‘重庆威斯嘉贸易有限公司‘,‘text10‘:‘重庆趣搭网络科技有限公司‘,‘text11‘:‘辽宁分公司‘,‘text12‘:‘吉林分公司‘,‘text13‘:‘黑龙江分公司‘,‘text14‘:‘厦门分公司‘,‘text15‘:‘四川分公司‘,‘text16‘:‘陕西分公司‘,‘text17‘:‘宁夏分公司‘,‘text18‘:‘安徽分公司‘,‘text19‘:‘河北分公司‘,‘text20‘:‘河南分公司‘,‘text21‘:‘江苏分公司‘,‘text22‘:‘天津分公司‘,‘text23‘:‘嘉兴江分公司‘}";////文本介绍json
var json_location_province="{‘province0‘:‘上海‘,‘province1‘:‘浙江‘,‘province2‘:‘湖北‘,‘province3‘:‘山东‘,‘provinc4‘:‘江苏‘,‘province5‘:‘湖南‘,‘province6‘:‘浙江嘉兴‘,‘province7‘:‘江西‘,‘province8‘:‘云南‘,‘province9‘:‘重庆‘,‘province10‘:‘重庆‘,‘province11‘:‘辽宁‘,‘province12‘:‘吉林‘,‘province13‘:‘黑龙江‘,‘province14‘:‘福建‘,‘province15‘:‘四川‘,‘province16‘:‘陕西‘,‘province17‘:‘宁夏‘,‘province18‘:‘安徽‘,‘province19‘:‘河北‘,‘province20‘:‘河南‘,‘province21‘:‘江苏省（除无锡）‘,‘province22‘:‘天津‘,‘province23‘:‘浙江嘉兴‘}"; //行政区域的json
var jsonTxt=eval(‘(‘+json_location_text+‘)‘),
jsonProvince=eval(‘(‘+json_location_province+‘)‘);
window.onload=function(){
//var isFullScreen=true;
//document.getElementById("sexyButton").onclick=function(){
// this.style.visibility=‘hidden‘;
// launchFullScreen(document.documentElement,function(){
// isFullScreen=true;
// });
//}
// document.onkeydown=function(event){
// var e = event || window.event || arguments.callee.caller.arguments[0];
// if(e && e.keyCode==122){ // f11
// if(isFullScreen){
// document.getElementById("sexyButton").style.visibility=‘hidden‘;
// }else{
// document.getElementById("sexyButton").style.visibility="visible";
// isFullScreen =false;
// }
// }
// };
var win=window,doc=document,
winWidth= win.screen.width,
winClientHeight= win.screen.height,
winHeight= doc.body.clientHeight,
container=doc.getElementById("container"),
rightItem=doc.getElementById("rightItem"),
retunrs=document.getElementById("retunrs"),
arrows=document.getElementById("arrows");
doc.getElementById("wrap").style.height=winHeight+‘px‘,
doc.getElementById("container").style.width="80%",
doc.getElementById("rightItem").style.height=winHeight+‘px‘;
var resizeFlag=true,resizeTime=null;
window.onresize = waitIng(function(){
var winClientHeight= window.screen.height;
var winHeight= document.body.clientHeight;
document.getElementById("wrap").style.height=winHeight+‘px‘;
document.getElementById("rightItem").style.height=winHeight+‘px‘;
// window.scrollTo(0, 1) ;
}, 1100 );
var mp = new BMap.Map("container",{minZoom:5});
var point = new BMap.Point(121.483752, 30.92334,{enableMassClear: false});
// mp.centerAndZoom(point,5);
// animatePoint(point,mp)
mp.enableKeyboard();
mp.enableScrollWheelZoom();
mp.centerAndZoom("西安",5); //初始化地图,用城市名设置地图中心点
function animatePoint(point,mp){
var marker = new BMap.Marker(point);
mp.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
var opts = {
width : 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title : "ABOUT US" , // 信息窗口标题
enableMassClear: false, //不可清楚
enableMessage:false//设置允许信息窗发送短息
};
function info(text,opts,point){
var infoWindow = new BMap.InfoWindow(text,opts), // 创建信息窗口对象
result=document.getElementById("r-result");
mp.openInfoWindow(infoWindow,point); //开启信息窗口
result.innerHTML =infoWindow.getContent();
}
var start=jsonTxt[‘text0‘];
info(start,opts,point);
var pointArray = new Array();
for(var i=0;i<json_data.length;i++){
var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1]),{enableMassClear: false}); // 创建点
//var content = data_info[i][2];
//if(i!=0)mp.addOverlay(marker); //增加上海为跳动点
mp.addOverlay(marker); //增加点
//marker.setAnimation(null); //跳动的动画
pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
marker.addEventListener("click",function(e){
attribute(e);
});
}
mp.setViewport(pointArray);//让所有点在视野范围内
function attribute(e){//获取覆盖物位置
var p = e.target;
alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
}
var rightItem=document.getElementById("rightItem"),
oA=rightItem.getElementsByTagName("a"),
//var oA=getClass(rightItem,‘oa‘);
cons=document.getElementById("container"),
oP=getClass(cons,‘dt_dian‘);
rightItemUl=document.getElementById("rightItemUl"),
rightUlHeight=0;
var lis=rightItemUl.getElementsByTagName("li"),liHeightAll=0,
result=document.getElementById("r-result");
for(var k=0;k<lis.length;k++){
rightUlHeight+=Number(parseInt(getStyle(lis[k],‘height‘))+1);
}
rightItemUl.style.height=rightUlHeight+‘px‘;
for(var i=0;i<oA.length;i++){
oA[i].index=i;
oA[i].onfocus=function(ev){
var e=ev||window.event;
//var target = ev.target || ev.srcElement;
//var targetElement=target.nodeName.toLowerCase();
var focusedElement = document.activeElement.nodeName.toLowerCase();
if(focusedElement==‘a‘){
ctrol(this);
clearTimeout(autoTimer);
}
if (e && e.stopPropagation) {
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
}//onfocus
}
function ctrol(obj){
var m=obj.index,
str=obj.innerHTML; //获取选中的文本
document.getElementById("changeText").innerHTML=str;
leftMapOne(m);
}
var isFocus=true;
function leftMapOne(i){
liHeightAll=0;
if(i!=0){
var i=(i-1)<1?0:i-1;
//左侧的向上移动
if(i<1){
rightItemUl.style.webkitTransform="translateY(0px)";
rightItemUl.style.transform="translateY(0px)";
retunrs.style.display=‘‘;
arrows.style.cssText = "border-left:10px solid #999";
}else if(i<lis.length-1){
if(isFocus){
for(var j=0;j<i-1;j++){
liHeightAll+=Number(parseInt(getStyle(lis[j],‘height‘))+1);
}
rightItemUl.style.webkitTransform="translateY(-"+liHeightAll+"px)";
rightItemUl.style.transform="translateY(-"+liHeightAll+"px)";
}
retunrs.style.display=‘block‘;
arrows.style.cssText = "border-left:10px solid #fff";
}else if(i>lis.length-1){
isFocus=false;
}
var leftTxt=jsonTxt[‘text‘+i];
pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1],{enableMassClear: false});
var pointOne=pointArray[i];
info(leftTxt,opts,pointOne);
mp.centerAndZoom(pointArray[i], 12); //10 代表市区级别 数字越大 越清楚 11是城市名字级别
if(retunrs.style.display==‘block‘){
retunrs.onclick=function(){
mp.centerAndZoom("西安",5); //让所有点在视野范围
info(start,opts);
liHeightAll=0;
rightItemUl.style.webkitTransform="translateY(0px)";
rightItemUl.style.transform="translateY(0px)";
this.style.display=‘‘;
arrows.style.cssText = "border-left:10px solid #999";
}
}
}else{ //回归所有视野
mp.centerAndZoom("西安",5); //让所有点在视野范围
info(start,opts,point);
rightItemUl.style.webkitTransform="translateY(0px)";
rightItemUl.style.transform="translateY(0px)";
retunrs.style.display=‘‘;
arrows.style.cssText = "border-left:10px solid #999";
isFocus=true;
}
} //leftMapOne end
//自动播放功能
var autoTimer=null,
isPlay=true,
liHeight=0,
x=0;
var rightTxt=‘‘;
function autoPlay(isPlay){
if(isPlay){
function updateProgress(){
if (x<lis.length-1){
x++;
if(x==lis.length-1){
x=0;
}
liHeight=0;
if(!liHeight){
for(var j=0;j<x;j++){
liHeight+=Number(parseInt(getStyle(lis[j],‘height‘))+1);
}
rightTxt=document.getElementById("rightItemUl").getElementsByTagName("a")[x].innerHTML;
document.getElementById("changeText").innerHTML=rightTxt;
var leftTxt=jsonTxt[‘text‘+x];
pointArray[x] = new BMap.Point(json_data[x][0], json_data[x][1],{enableMassClear: false});
var pointOne=pointArray[x];
info(leftTxt,opts,pointOne);
mp.centerAndZoom(pointArray[x], 12); //10 代表市区级别 数字越大 越清楚 11是城市名字级别
rightItemUl.style.webkitTransform="translateY(-"+liHeight+"px)";
rightItemUl.style.transform="translateY(-"+liHeight+"px)";
}
clearTimeout(autoTimer);
autoTimer= setTimeout(function() {
updateProgress()},
9500); }
} //updateProgress() end
autoTimer=setTimeout(function(){updateProgress()},9500);
}else{
clearTimeout(autoTimer);
}
}
// autoPlay(isPlay); //自动轮播功能
// document.getElementById("rightItemUl").addEventListener("mouseenter",function(e){
// if(checkHover(e,this)){
// isPlay=false;
// clearTimeout(autoTimer);
// // autoPlay(isPlay);
// }
// },false);
//
// document.getElementById("rightItemUl").addEventListener("mouseout",function(e){
// if(checkHover(e,this)){
// isPlay=true;
// clearTimeout(autoTimer);
// // autoPlay(isPlay);
// }
// },false);
//下面文字自动轮播
var footerDiv=document.getElementById("footer_div"), offsetL=0;
function run(){
offsetL =parseInt(getStyle(footerDiv,‘left‘));
offsetL-=2;
footerDiv.style.left = offsetL+‘px‘;
//console.log(‘进去‘+offsetL);
if (offsetL >-900){
requestAnimationFrame(run);
}
}
// requestAnimationFrame(run);
//var handle = setTimeout(renderLoop, PERIOD);
// var handle = requestAnimationFrame(renderLoop);
// requestAnimationFrame(function(time){
// if(x<3) {
// x++;
// rander(x);
// requestAnimationFrame(arguments.callee);
// }
//
// });
}//onload end
//调用的 公共方法
;(function() {
var lastTime = 0;
var vendors = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame‘];
window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame‘] || window[vendors[x] + ‘CancelRequestAnimationFrame‘];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
var waitIng = function(fn,timeout ){
var timer;
return function(){
var self = this,
args = arguments;
clearTimeout( timer );
timer = setTimeout(function(){
fn.apply( self, args );
}, timeout );
};
};
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
function getClass(parent,className){
var elements=(parent||document).getElementsByTagName(‘*‘),
result=[], reg=new RegExp(‘\\b‘+className+‘\\b‘,i),i=0;
for(;i<elements.length;i++){
if(reg.test(elements[i].className)){
result.push(elements[i]);
}
}
return result;
}
//取消全屏
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
function launchFullScreen(element,fn) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
fn&&fn();
}
//阻止mouseover和mouseout的反复触发
function contains(parentNode, childNode) {
if (parentNode.contains) {
return parentNode != childNode && parentNode.contains(childNode);
} else {
return !!(parentNode.compareDocumentPosition(childNode) & 16);
}
}
function checkHover(e,target){
if (getEvent(e).type=="mouseover") {
return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
} else {
return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
}
}
function getEvent(e){
return e||window.event;
}
</script>
</body>
</html>
//如果想简单把单页打包成APP，下面的网址可以实现
http://www.appsgeyser.com/
标签：
原文地址：http://www.cnblogs.com/surfaces/p/4495132.html
