//预览地址： 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; 100%; height:100% !important; overflow:hidden !important; _background-image: url(about:blank); /*用浏览器空白页面作为背景*/ background-attachment:fixed; /* 确保滚动条滚动时，元素不闪动*/ text-overflow:ellipsis; min-height:100%;} /*----------------------------------整体网站框架布局------------------------------------------------*/ #wrap{ 100%; height:980px; position:relative; overflow:hidden !important; } #container{80% ;height:100%; overflow:hidden !important; border:0; position:absolute; left:0; top:0; -webkit-box-sizing:border-box;box-sizing:border-box;} #rightItem{ 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; 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{ 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; 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{ 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; 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; 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{ 100px; float:left; margin-right:10px;} #rightItemUl h3{ line-height:18px;} #rightItemUl p{ line-height:20px;float:left; 98%; text-indent:4em; } #rightItem .hide{ padding-left:4%; margin:10px 0; float:left; } #rightItem .hide img{ display:none !important} #rightItem .info{ float:left; 240px;} #rightItem .info h3{ 100%; float:left;} #rightItem .info strong{ 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; auto; min-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{ 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{100%; } #footer{ 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; 80%; background:#fff;background:rgba(255,255,255,0.90); color:#412859;} #scrollTxt{ position:absolute; left:0; bottom:1px;height:42px; line-height:43px; 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">上海趣搭网络科技有限公司是一家专注于服饰鞋帽类的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>杭州东部软件园科技大厦909</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.339201,31.244829], //上海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"; i=0; info(start,opts,point); } } }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/