首页>>Jquery文字>>jquery 地图点击显示对应弹窗介绍(2019-09-10)

jquery 地图点击显示对应弹窗介绍

jquery 地图点击显示对应弹窗介绍
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script type="text/javascript">  
  2.         $(function() {  
  3.             if ($(".map-branch")) {  
  4.                 //默认显示上海  
  5.                 $(".map-dot.shanghai").addClass("cur");  
  6.                 $("#company_shanghai").show().css({  
  7.                     "left": $(".map-dot.shanghai").position().left + 36,  
  8.                     "top": $(".map-dot.shanghai").position().top - $("#company_shanghai").height() / 2 + 8  
  9.                 });  
  10.                 $(".map-dot").on("mouseover", function() {  
  11.                     $(this).addClass("cur").siblings(".map-dot").removeClass("cur");  
  12.                 });  
  13.                 $(".map-dot").on("click", function() {  
  14.                     $(this).addClass("cur").siblings(".map-dot").removeClass("cur");  
  15.                     var dataid = $(this).attr("data-id")  
  16.                         , comp = $("#company_" + dataid)  
  17.                         , otherComp = $("#company_" + dataid).siblings(".branch-map-data");  
  18.                     comp.fadeIn("fast").css({  
  19.                         "left": $(this).position().left + 36,  
  20.                         "top": $(this).position().top - comp.height() / 2 + 8  
  21.                     });  
  22.                     otherComp.hide();  
  23.                 });  
  24.                 $(".branch-map-data").on("mouseleave", function() {  
  25.                     $(this).hide();  
  26.                     $(".map-dot").removeClass("cur");  
  27.                 });  
  28.             }  
  29.         });  
  30.   
  31.     </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_817.html