Question

请看这个网站是用flash制作的：我们可以通过jquery css做到吗？

Go here

然后点击任何标有＆＃34; Release＆＃34;的建筑物您将在悬停动画效果上看到一个建筑物。我想用jquery和css开发或者你可以建议开发

Answer 1

首先你要知道这里什么都没有。这些是预渲染图像。您可以在软件中将这些突出显示的区域绘制为不同的图层，例如photoshop。

enter image description here

然后您需要创建一个可以检测鼠标悬停的区域。旧学校image map html标记是实现此目的的一种方法。您将绘制一个覆盖与高光图像相同区域的多边形。

enter image description here

结果将是这样的：

<map name="image-maps-2015-02-15-031753" id="ImageMapsCom-image-maps-2015-02-15-031753">
    <area alt="" href="#" title="" shape="poly" coords="52,99,101,49,172,21,267,21,317,93,302,127,268,63,194,73,129,89,74,115,49,132" style="outline:none;" target="_self" />
</map>

最后，如果鼠标悬停在该区域，显示高亮图像＆＃34 。在使用jquery的情况下，map上的mouseenter事件很简单，可以执行此操作;

$（＆＃39; map＆＃39;）。on（＆＃39; mouseenter＆＃39;，function（）{ $（＆＃39;＃亮点＆＃39;）显示（）。 }）

$（＆＃39; map＆＃39;）。on（＆＃39; mouseleave＆＃39;，function（）{ $（＆＃39;＃亮点＆＃39;）隐藏（）。 }）

全场演示：http://jsfiddle.net/pggyq4t8/2/（悬停在顶层）

Answer 2

2020年5月，在类似的Question上我的回答中，我在Answer上向OP展示了如何使用SVG文件，以及如何对图像叠加层进行更多控制并仅使用CSS解决方案（在<a>上显示:hover和一些演示文本）。我还使HTML页面具有完全响应能力，可以在各种设备上使用。

仅在此处发布代码段（进入“整页”以获得更好的外观。调整浏览器大小以测试响应能力）：

/*
    Visit below answers on Stackoverflow for an explanation
    of the math used for responsive sizing of elements.

    https://stackoverflow.com/a/62033317/2015909
    https://stackoverflow.com/a/61867702/2015909
*/
/**************************/
/* preferred global rules */
/**************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, *   { box-sizing: inherit }
body                    { margin: 0 }

/* responsive base font size using y = mx + b */
html    { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body    { font-size: 1rem }

[band]  { display: flex; flex-flow: column wrap; align-content: center }

[padded="1"], [padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    'Band padding' is only active when 'page padding' is off 
*/
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}

/* Making sure the image fits in any viewport, either portrait or landscape */
@media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
@media (orientation: landscape) { #construction-site { height: 100%; width: auto } }
</style>

<body padded="0">
<div id="construction-site" band="padded">
    <svg viewbox="0 0 1600 1200"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

        <style>
            .line       { stroke: Black; stroke-opacity: 0; stroke-width: 2px; cursor: pointer } 
            .polyline   { fill  : Red  ; fill-opacity  : 0 }
    
            .floor-text { fill: Black; stroke: none; fill-opacity: 0; cursor: default;
                          font-weight: bold; font-family: sans-serif;
                          /* responsive font using y = mx + b */
                          font-size: calc(-1vmin + 51.2px); /* (320,48)(1920,32) */
                        }

            .floor:hover>.line       { fill-opacity: .4; stroke-opacity: .8 }
            .floor:hover+.floor-text { fill-opacity: .7 }
        </style>

        <image href="https://i.imgur.com/0i4N0d3.jpg"/>

        <a id="top-floor" class="floor" rel="noopener" target="_blank" href="javascript:void(0)" title="top floor, click for details...">
            <polyline class="line polyline" 
                points="201.242,678.473 1121.43, 333.16 1370.24,
                        553.473 1387.74, 668.473 1127.49,
                        474.098 189.242, 753.473 202.242, 678.973"/>

            <line class="line" x1="1121.42" y1="333.472" x2="1127.45" y2="474.097"/>

        </a>
        <text class="floor-text" x="800" y="150" text-anchor="middle">top floor demo text</text>
    </svg>
</div>
</body>

我们如何从现有的图像Jquery，Css中绘制3D建筑结构？

2 个答案: