zoukankan      html  css  js  c++  java
  • 百度地图展示分公司信息 (针对电视机)

    //预览地址:  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>总&nbsp;&nbsp;部:</strong>上海趣搭网络网络科技有限公司</h3>
                  <h3><strong>联系人:</strong></h3>
                  <h3><strong>电&nbsp;&nbsp;话:</strong>021-52685038</h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>021-52685038:</h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18171273330 </h3>
                   <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18580450888 </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18961682115 </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18073118788 </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>:400-088-3414  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 13077933390</h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>18616593666 </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 15922655588</h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18375834841</h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18704032222 </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18704032222 </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong> 18704032222 </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>电&nbsp;&nbsp;话:</strong>  </h3>
                  <h3><strong>地&nbsp;&nbsp;址:</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>
    View Code

    //如果想简单把单页打包成APP,下面的网址可以实现

    http://www.appsgeyser.com/

  • 相关阅读:
    ERROR Function not available to this responsibility.Change responsibilities or contact your System Administrator.
    After Upgrade To Release 12.1.3 Users Receive "Function Not Available To This Responsibility" Error While Selecting Sub Menus Under Diagnostics (Doc ID 1200743.1)
    产品设计中先熟练使用铅笔 不要依赖Axure
    12.1.2: How to Modify and Enable The Configurable Home Page Delivered Via 12.1.2 (Doc ID 1061482.1)
    Reverting back to the R12.1.1 and R12.1.3 Homepage Layout
    常见Linux版本
    网口扫盲二:Mac与Phy组成原理的简单分析
    VMware 8安装苹果操作系统Mac OS X 10.7 Lion正式版
    VMware8安装MacOS 10.8
    回顾苹果操作系统Mac OS的发展历史
  • 原文地址:https://www.cnblogs.com/surfaces/p/4495132.html
Copyright © 2011-2022 走看看