分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 移动互联 » 互联网络 » 制作一款简单的地图点击交互效果
+

制作一款简单的地图点击交互效果

之前我们介绍了利用百度地图名片功能制作一个属于自己的企业地址,那么现在如果你愿意折腾的话,可以利用下面这个交互效果让你的地址不再单调。

首先我们看看这个效果:
制作一款简单的地图点击交互效果-BanYuner

那么这个效果就是当你的鼠标移动到了指定的地方之后,背景图片就会改变,效果方面还是不错的。

接下来就是代码展示部分:

<section class="interactive-points" id="interactive-1" tabindex="0">
	<img class="static" src="img/map.png" alt="Map of London" />
	<div class="backgrounds">
		<div class="background__element" style="background-image: url(img/1.jpg)"></div>
		<div class="background__element" style="background-image: url(img/2.jpg)"></div>
		<!--...-->
	</div>
	<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
		<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
		<path class="point" d="..."/>
		<!--...-->
	</svg>
	<div class="points-tooltips">
		<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
		<div class="point-tooltip"><!--...--></div>
		<!--...-->
	</div>
	<div class="points-content">
		<div class="point-content">
			<h3 class="point-content__title">The Rupert Connection</h3>
			<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
			<p class="point-content__text">Descended from astronomers...</p>
		</div>
		<div class="point-content">
			<!--...-->
		</div>
		<!--...-->
	</div>
</section>

整个代码非常明确的分工,分为四个部分,一个就是默认的背景图,一个就是通过SVG设定的地标,一个就是对应地标的图标,最后一个就是地标图片的相关文字说明以及tooltip:

默认背景代码

<img class="static" src="img/map.png" alt="Map of London" />

对应地标图片

	<div class="backgrounds">
		<div class="background__element" style="background-image: url(img/1.jpg)"></div>
		<div class="background__element" style="background-image: url(img/2.jpg)"></div>
		<!--...-->
	</div>

SVG地标

<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
		<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
		<path class="point" d="..."/>
		<!--...-->
	</svg>

地标图片的相关文字说明以及tooltip

<div class="points-tooltips">
		<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
		<div class="point-tooltip"><!--...--></div>
		<!--...-->
	</div>
	<div class="points-content">
		<div class="point-content">
			<h3 class="point-content__title">The Rupert Connection</h3>
			<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
			<p class="point-content__text">Descended from astronomers...</p>
		</div>
		<div class="point-content">
			<!--...-->
		</div>
		<!--...-->
	</div>

那么代码部分也分得比较明确了,有兴趣的用户可以利用这个做一个单独的页面,可以用来作为一个时光轴页面或者别的介绍页面,是一个比较实用的展示页面。

下面再附上几张官方图片:
制作一款简单的地图点击交互效果-BanYuner

制作一款简单的地图点击交互效果-BanYuner

制作一款简单的地图点击交互效果-BanYuner

另外,此部分代码是可以修改的:

/**
 * PointsMap options/settings.
 */
PointsMap.prototype.options = {
	// Maximum opacity that the background element of 
	// a point can have when active (mouse gets closer to it)
	maxOpacityOnActive : 0.3,
	// The distance from the mouse pointer to 
	// a point where the opacity of the background element is 0
	maxDistance : 100, 
	// If viewportFactor is different than -1, then maxDistance 
	// will be overwritten by [point?s parent width / viewportFactor]
	viewportFactor : 9,
	// When the mouse is [activeOn]px away from 
	// one point, its image gets opacity = point.options.maxOpacity.
	activeOn : 30
};

上面的代码部分不在本文中,需要下载整体文件之后自行搜索在修改,这里附上官方的DEMO以及下载地址:

DEMO: http://tympanus.net/Development/InteractivePoints/

下载地址: http://tympanus.net/Development/InteractivePoints/InteractivePoints.zip

如果无法下载或者下载过慢,下面的百度盘也提供了下载。

下载地址

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
制作一款简单的地图点击交互效果
支付宝(点击图片切换)
扫码,支持我
制作一款简单的地图点击交互效果
微信(点击图片切换)
扫码,手机看
制作一款简单的地图点击交互效果
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • 如何将九秒磁力云播移植到自己的站点

    如何将九秒磁力云播移植到自己的站点

    最近查看了一下百度统计的结果,很多结果都是来自于之前的一篇名为九秒磁力云播的文章,详见:

    点击查看
  • 百度站长工具-闭站保护

    百度站长工具-闭站保护

    有段时间我曾经想使用这个功能,但是我并没有使用,不是说这个功能不好,仅仅是因为我怕开启了这个功能之后就会存在这样或者 ...

    点击查看
  • 如何优雅的提取微信聊天的记录

    如何优雅的提取微信聊天的记录

    我们都知道,微信并没有像QQ一样付费漫游记录的功能,现在没有,我相信以后也不会有。很久之前还提供上传记录,现在连上传记 ...

    点击查看
  • 三大Windows 10系统各自获新累积更新

    三大Windows 10系统各自获新累积更新

    今天在cnBeta看到了这个新闻,我个人觉得还是有必要转载过来的,有兴趣的用户可以查看一下,如果你已经看过了,那么就不用再 ...

    点击查看
  • 如何做一个合格并且优秀的老司机

    如何做一个合格并且优秀的老司机

    今天在fuliba看到了这篇文章,看完了之后我不得不说,只要你善用搜索引擎,没有什么是办不到,连办不到的时候都可以做到,还 ...

    点击查看
  • 360网盘卷土重来转型企业网盘,你怎么看

    360网盘卷土重来转型企业网盘,你怎么看

    前段时间360网盘宣布关闭网盘这个服务,当时很多人都表示很蛋疼,为什么,因为360网盘的空间量确实是很大,很多人想要转移里 ...

    点击查看
制作一款简单的地图点击交互效果
5 + 9 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)