使用jQuery实现的交互式3D地图

Interactive Map with Jquery 可用于展示展览厅、活动场馆、小区等大型建筑群的布局。

jquery, map

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3513
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function precarica(img) {
    $(img).each(function() {
        $('<img/>')[0].src = this;
    });
}
precarica([
    'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-yellow.png',
    'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-red.png',
    'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-pink.png',
    'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-green.png',
    'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-blue.png'
]);

/*******jQuery for external title*********/

jQuery(document).ready(function() {
    $('.title-blue').mouseout(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-original.png');
        }),
        $('.title-blue').mouseover(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-blue.png');
        });
    $('.title-red').mouseout(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-original.png');
        }),
        $('.title-red').mouseover(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-red.png');
        });
    $('.title-green').mouseout(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-original.png');
        }),
        $('.title-green').mouseover(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-green.png');
        });
    $('.title-yellow').mouseout(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-original.png');
        }),
        $('.title-yellow').mouseover(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-yellow.png');
        });
    $('.title-pink').mouseout(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-original.png');
        }),
        $('.title-pink').mouseover(function() {
            $("#map").attr('src', 'http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-pink.png');
        });
});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300italic,500);
* {
    margin: 0px;
    padding: 0px;
}
body {
    background: rgb(18, 181, 231);
}
.container {
    overflow: hidden;
    text-align: center;
    background: -moz-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    /* FF3.6-15 */
    
    background: -webkit-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    
    background: linear-gradient(to bottom, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7', GradientType=0);
    /* IE6-9 */
}
h1 {
    font-family: 'Ubuntu', sans-serif;
    color: rgba(255, 255, 255, 0.65);
    font-size: 30px;
    margin: 20px 0px;
    font-weight: 100;
}
@media screen and (max-width: 480px) {
    h1 {
        font-size: 26px;
    }
    #map {
        width: 100%;
        margin-top: 25px !important;
    }
    .title ul li {
        padding: 8px 0px !important;
    }
    li a {
        padding: 9px 10px !important;
    }
    .title {
        margin-top: 30px;
    }
}
.title ul li {
    list-style: none;
    font-family: 'Ubuntu', sans-serif;
    display: inline-block;
    border: #fff solid 2px;
    border-radius: 50px;
    padding: 10px 0px;
    margin: 5px;
}
li a {
    text-decoration: none;
    color: #fff;
    -webkit-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
    -moz-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
    -o-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
    transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
    padding: 10px 20px
}
li a:hover {
    background: #fff;
    color: #1db8e8;
    border-radius: 50px;
}
#map {
    margin-top: 40px;
}

HTML

Interactive Map with Jquery 可用于展示展览厅、活动场馆、小区等大型建筑群的布局。

jquery, map

编辑器支持Emmet

快捷键

Interactive Map with Jquery 可用于展示展览厅、活动场馆、小区等大型建筑群的布局。

jquery, map

使用jQuery和CSS实现自定义的鼠标交互方式

使用jQuery.Stapel.js插件实现自动分组的自适应缩略图片堆叠

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：