html5+css3世界地图区域划分高亮显示特效.zip

共4个文件

css：2个

html：1个

js：1个

版权申诉

特效代码

jquery插件

jquery特效

81 浏览量 2023-09-26 01:42:56 上传评论收藏 101KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5+css3世界地图区域划分高亮显示特效.zip （4个子文件）

assets

jquery-1.10.2.min.js 116KB

css

custom.css 11KB

bootstrap.css 128KB

index.html 123KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>html5+css3世界地图区域划分高亮显示特效</title> <link rel="stylesheet" href="assets/css/bootstrap.css"/> <link rel="stylesheet" href="assets/css/custom.css"/> <style type="text/css"> @media screen and (max-width: 320px) { #map_base svg { height: 100px; } } @media screen and (max-width: 400px) and (min-width: 321px) { #map_base svg { height: 134px; } } @media screen and (max-width: 480px) and (min-width: 401px) { #map_base svg { height: 170px; } } @media screen and (max-width: 568px) and (min-width: 481px) { #map_base svg { height: 210px; } } @media screen and (max-width: 685px) and (min-width: 569px) { #map_base svg { height: 252px; } } @media screen and (max-width: 767px) and (min-width: 686px) { #map_base svg { height: 310px; } } @media screen and (max-width: 979px) and (min-width: 768px) { #map_base svg { height: 360px; } } @media screen and (max-width: 1024px) and (min-width: 980px) { #map_base svg { height: 470px; } } @media screen and (max-width: 1280px) and (min-width: 1025px) { #map_base svg { height: 470px; } } @media screen and (min-width: 1281px) { #map_base svg { height: 580px; } } </style> </head> <body><script src="/demos/googlegg.js"></script> <div class="map-preview"> <div class="container"> <div class="prev"> <div id="mapwrapper"> <div id="map_base"> <svg version="1.1" viewBox="0 0 1000 500" xml:space="preserve"> <g id="countries"> <path id="map_1" vector-effect="non-scaling-stroke" fill="#EBECED" d="M666.931,154.749c-1.485-6.81-7.11,5.604-11.036,2.338c-0.738-0.615-3.502,0.704-3.502-0.765c-9.55,0.765-6.366,9.55-14.962,6.578c0.637,7.11-2.53,3.268,0.85,13.689c1.272,3.926,6.261-1.274,1.272,7.641c4.67,1.061,17.87,2.784,16.447-2.547c-1.272-4.775,8.384-1.91,7.853-7.004c-0.53-5.094,6.686-3.608,4.352-7.429c-0.901-1.474,3.582-2.334-0.425-5.837c-1.439-1.258,7.209-1.551,9.339-4.455C670.664,154.044,669.044,164.439,666.931,154.749z"/> <path id="map_2" vector-effect="non-scaling-stroke" fill="#EBECED" d="M513.914,143.8c-1.804,0.425-1.804-3.714-1.38-4.244c-0.425-0.694-1.839-1.495-1.839-1.83c-1.264-0.024-1.778,0.857-1.875,2.253c1.805,2.548-1.556,2.653,2.122,8.065C512.534,143.481,512.534,148.895,513.914,143.8z"/> <path id="map_3" vector-effect="non-scaling-stroke" fill="#EBECED" d="M443.985,175.67c-12.31-0.282,0.414,4.386-11.532,7.924c-2.667,0.79-10.453,4.669-10.453,4.669v4.103l12.282,9.335l18.47,14.045c0,0-0.903,2.785,3.964,3.645c7.216,1.273-0.958,5.673,5.661,4.244c12.45-2.688-6.306,2.971,24.083-16.412c-0.96-6.226-2.011,0.778-5.972-7.217c-3.071-6.196,2.119-1.882-1.274-17.686c-2.46-11.46-8.771-10.753-3.752-15.563c3.308-3.172-0.634-5.801,1.206-8.7c-3.537,1.556-2.617-1.698-8.913,0.565c-2.715,0.976-6.085-3.113-24.054,6.154C445.4,167.464,448.953,175.784,443.985,175.67z"/> <path id="map_4" vector-effect="non-scaling-stroke" fill="#EBECED" d="M457,137.859c0.547-0.719-0.663-1.803-1.391-0.719C454.813,138.328,456.453,138.578,457,137.859z"/> <path id="map_5" vector-effect="non-scaling-stroke" fill="#EBECED" d="M499.907,357.833c14.644-0.849,2.754,5.41,23.765,0.53L519,353.8v-12.097l6.9-0.637c-0.306-2.232,0.134-4.637,0.161-6.685c-9.231,0.954-6.815-10.294-6.923-12.733c-0.105-2.441,2.481-0.638-3.885-2.124c-6.367-1.485-0.829,3.078-6.984,3.609c-6.155,0.53-5.508-4.883-5.826-6.969c-0.318-2.087-10.5-1.097-13.825,0c7.463,17.421-1.341,3.679,4.884,18.747c1.291,3.126-5.659,4.386-7.044,22.214C489.825,353.8,489.943,358.41,499.907,357.833z"/> <path id="map_6" vector-effect="non-scaling-stroke" fill="#EBECED" d="M270.808,404.454c3.221-9.997,17.544-13.299,6.932-16.979c0.708,11.035-12.476,6.737-12.025,6.084c8.481-12.321-2.971-3.679-15.563-18.535c-3.85-4.541-4.104,3.254-4.669,3.112c-0.567-0.142-1.751-6.619-8.772-0.564c1.839,7.64-6.01,5.34-3.254,11.035c4.244,8.772-6.65,8.488-0.605,22.778c6.667,15.761-0.526,13.3,3.435,20.657c3.962,7.358-3.828,3.183,3.82,19.384c13.159,27.872,3.113,18.817,5.943,25.608c2.215,5.318,2.971-1.414,5.8,4.528c2.83,5.942,2.828-0.568,12.168,3.536c-8.773-10.612-1.345-5.519-2.406-10.471c-0.845-3.941,3.537-2.617,2.547-6.508s-5.659,0.211-7.004-5.519c-1.182-5.038,5.942-1.345,3.607-7.64c-1.671-4.511,4.599-1.769,3.396-5.234c-1.203-3.467-5.306,2.546-6.366-5.094c-0.361-2.592,11.036,3.041,7.356-2.688c-1.326-2.065,1.557-1.91-1.273-5.376c3.036,0.809,11.793,0.807,14.433-4.952c2.334-5.094-2.972-3.963-2.405-6.508c0.688-3.104-6.438-3.468-4.245-5.377C268.823,416.79,269.617,408.146,270.808,404.454z"/> <path id="map_7" vector-effect="non-scaling-stroke" fill="#EBECED" d="M584.586,142.393c-1.45,0.688-2.229,0.135-3.82,0.559c2.227,5.896,4.454,2.972,4.349,4.563c2.442,2.123,2.931,5.205,5.839,2.984C582.322,142.951,590.953,146.983,584.586,142.393z"/> <path id="map_8" vector-effect="non-scaling-stroke" fill="#EBECED" d="M923.904,372.9c-0.708-9.762-9.056-3.961-8.915-19.101c0.143-15.139-4.668,0.708-5.659-16.979c-0.787-14.07-7.032,15.351-8.347,18.535c-2.689,6.509-19.243-5.659-16.187-8.206c1.356-1.132,8.688-12.45,2.604-9.763c-6.084,2.688-10.753-3.962-11.602,0c-0.85,3.961-0.989-3.679-9.238,6.508c-8.247,10.188-5.099-9.903-18.211,8.207c-9.183,12.684-6.614-1.239-8.488,7.923c-2.547,12.45-35.148,4.692-30.844,27.448c0.99,5.235-4.245-3.112-0.707,15.139c-1.84,2.265,3.536,10.471-2.405,13.158c-5.943,2.688-0.426,9.621,8.348,4.67c8.771-4.953,16.837,0.282,17.543-4.244c0.481-3.08,35.23-14.998,33.108,4.385c-0.438,3.999,2.842-1.613,5.235-2.829c8.63-4.387,0.424,4.244,0.565,5.093c0.143,0.85,8.206-8.063,4.386,5.235c-1.416,4.93,4.669,10.045,10.754,5.66c6.083-4.388,4.385,4.952,9.621,0c5.233-4.953,8.347,2.688,11.318-7.216c1.569-5.231,21.081-17.545,23.628-29.571c2.547-12.025-3.112-13.864-3.254-17.968C927.017,374.881,924.346,379.01,923.904,372.9z M882.447,443.078c-6.79,10.753,1.699,15.422,9.764,0C887.824,445.059,884.712,444.351,882.447,443.078z"/> <path id="map_9" vector-effect="non-scaling-stroke" fill="#EBECED" d="M501.781,117.731c-0.622-0.499-1.7-2.142-0.919-2.264c-8.702-2.688-3.467,2.264-8.277,0.07c-6.366,1.557-0.495,4.528-2.972,3.834c-1.614-0.454-8.064,0.977-9.794-0.014c1.556,1.142,2.497,2.015,2.933,2.547c7.993-1.769,2.759,1.203,8.772,1.132c2.406-0.028,7.216,0.111,7.923-0.793C500.154,121.339,498.739,119.782,501.781,117.731z"/> <path id="map_10" vector-effect="non-scaling-stroke" fill="#EBECED" d="M595.516,140.492c-2.441,2.954-2.326,2.173-6.473-0.35c2.334,4.937-1.168,0.686-4.457,2.25c6.367,4.591-2.264,0.559,6.367,8.105c6.685-5.105,1.804-0.579,6.685,1.826C598.136,143.311,603.475,147.09,595.516,140.492z"/> <path id="map_11" vector-effect="non-scaling-stroke" fill="#EBECED" d="M203.625,201.875c-0.625-1.938-1.438,0.125-2.063,1.375C205.063,210.625,204.25,203.813,203.625,201.875z"/> <path id="map_12" vector-effect="non-scaling-stroke" fill="#EBECED" d="M608.708,198c0.75-0.042,1.083-1.625,0-1.917S607.871,198.047,608.708,198z"/> <path id="map_13" vector-effect="non-scaling-stroke" fill="#EBECED" d="M739.938,207.894c-5.943,0.425,6.154-7.853-3.715-6.579c-6.869,0.886-0.787-4.55-7.64-4.55c-2.66,0,1.909,11.872,3.68,17.531c9.408-1.556,2.263-4.71,4.739-4.669c4.173,0.07,2.688,2.476,5.518,6.65C743.194,212.39,743.561,207.634,739.938,207.894z"/> <path id="map_14" vector-effect="non-scaling-stroke" fill="#EBECED" d="M538.214,106.235c0.742,0.743-1.592-3.024,3.243-3.024c-0.911-0.706-1.87-3.578-0.59-3.66c5.827-0.372-1.646-1.062-3.078-6.632c-1.152-4.485-5.253-1.221-7.868-3.768c-2.035,2.335-2.318-0.283-4.087,1.557c-1.079,1.123,2.405,2.688-7.569,6.297c3.819,7.286-3.184,3.89,0.31,7.852C525.834,103.211,537.471,105.492,538.214,106.235z"/> <path id="map_15" vector-effect="non-scaling-stroke" fill="#EBECED" d="M470.513,112.072c-1.28-0.581-1.526-1.001-1.364-1.423c0.332-0.859,2.364-1.723,0.798-3.953c-4.262-2.317-4.209,0.547-7.145-1.133c-0.67,0

评论收藏

内容反馈

版权申诉