我们如何从现有图像Jquery，Css中绘制3D建筑结构? [英] How can we draw 3D bulding structure from existing image Jquery,Css?

问题描述

请查看此网站是由Flash制作的: 我们可以通过jQuery CSS做到吗?

Please see this site it was made in flash: Can we do it by jquery css?

然后单击标记为发布"的任何建筑物 您将看到一个悬停在动画效果上的建筑物. 我想使用jQuery和CSS开发 或者您可以提出发展建议

And click on any building marked with "Release" You will see one building on hover animation effect. That i want to develop using jquery and css Or you can suggest for development

推荐答案

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

1. 然后，您需要创建一个可以检测鼠标悬停的区域.老派图像地图 html标记是一种方法去做这个.您将绘制一个覆盖与高光图像相同区域的多边形.

1. Then you need create an area that can detect mouse hover. The old school image map html markup is one way to do this. You will draw a polygon that covers the same area as your highlight images.

结果将是这样的:

<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>

1. 最后，您需要一点JS来完成"如果鼠标悬停在该区域上，则显示突出显示的图像".如果您使用的是jquery，则map上的mouseenter事件很容易做到这一点；

1. finally, you need a bit JS to do "if mouse hover the area, show the highlight image" . In the case you use jquery, mouseenter event on map is simple enough to do this;

$('map').on('mouseenter'，function(){ $('#highlight').show(); })

$('map').on('mouseenter', function () { $('#highlight').show(); })

$('map').on('mouseleave'，function(){ $('#highlight').hide(); })

$('map').on('mouseleave', function () { $('#highlight').hide(); })

---

完整演示: http://jsfiddle.net/pggyq4t8/2/(将鼠标悬停在顶层)

---

FULL DEMO: http://jsfiddle.net/pggyq4t8/2/ (hover the top floor)

这篇关于我们如何从现有图像Jquery，Css中绘制3D建筑结构?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！