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

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

【文章目录】

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

首先我们看看这个效果:
制作一款简单的地图点击交互效果-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

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

下载地址

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

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

 相关推荐

换一批 换一批
  • 百度网盘文件满速下载?我有新方法

    百度网盘文件满速下载?我有新方法

    现在百度网盘已经是丧心病狂了,很多破解版本的客户端已经没有效果了,那么如何能够满速下载大文件呢,今天介绍一个方法给大 ...

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

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

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

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

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

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

    点击查看
  • 避免站点被抄袭,开启百度搜索官网保护工具

    避免站点被抄袭,开启百度搜索官网保护工具

    百度站长工具是我使用的比较频繁的工具,因为通过这个工具,我可以很明白的了解到我的站点是个什么情况,收录量以及索引量, ...

    点击查看
  • 如何修改钉钉打卡的位置信息

    如何修改钉钉打卡的位置信息

    钉钉这个软件已经越来越普及了,普及的原因就是其打卡和签到功能被很多企业所使用,但是实际使用过程中还是存在很多问题,就 ...

    点击查看
  • 如何利用百度网盘客户端在线观看电影

    如何利用百度网盘客户端在线观看电影

    最近这段时间,我们都知道,各种云播软件逐渐消失,即使不断出现类似客户端,但是很快就会被端掉或者说因为各种原因消失在我 ...

    点击查看
  • 影视下载站点MP4吧疑似更换站点信息或被关闭

    影视下载站点MP4吧疑似更换站点信息或被关闭

    最近两天我都上不去这个站点,我一开始以为是短暂的事情,但是后来才发现,这个事情不是那么简单的,但是也有可能是我想多了 ...

    点击查看
  • 《互联网直播服务管理规定》:“后台实名、前台自愿”原则

    《互联网直播服务管理规定》:“后台实名、前台自愿”原则

    今天早些时候,国家网信办发布了一篇文章,有关负责人表示,出台《规定》旨在促进互联网直播行业健康有序发展,弘扬社会主义 ...

    点击查看
  • EDMAG下载站关闭公告

    EDMAG下载站关闭公告

    又一个电影资源站点关闭了,这个预示着什么,我感觉就是预示着我的站点也即将关闭了。

    点击查看
  • 360网盘将关闭 百度和腾讯回应:将继续提供个人存储服务

    360网盘将关闭 百度和腾讯回应:将继续提供个人存储服务

    2016-10-30得知消息如下: 今天我了解到的比较重要的消息就是这个消息了,虽然我知道,360网盘关闭时迟早的事情,毕竟很久 ...

    点击查看
  • 各种一键安装Web网站环境脚本

    各种一键安装Web网站环境脚本

    现在通过VPS搭建WordPress博客的人也是越来越多了,虽然我使用的是虚拟机,各种环境方面已经完善了,但是最终的结果逃不过自 ...

    点击查看
  • 如何让机械硬盘性能秒变固态硬盘

    如何让机械硬盘性能秒变固态硬盘

    我们都知道,固态硬盘的读写速度是秒杀机械硬盘的。随着固态硬盘的普及,不得不说,现在很多电脑的标配都换成了固态了,没有 ...

    点击查看

  目前有 0 条评论 其中:访客: 0 条, 博主: 0 条

制作一款简单的地图点击交互效果
评分: 0 + 0 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)