首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用原生JS实现鼠标点击爱心效果 !!!

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的。其实实现起来也很简单,下面一起来学习一下吧。...这样的效果很常用,在很多网页博客中都有使用 实现思路 首先我们需要获取到当前鼠标点击的位置 需要在当前位置生成一个标签 需要给标签添加随机的自定义内容 随机的文本颜色 添加文本的淡出效果 清除淡出的标签...js中直接操作动画帧的样式比较复杂,所以采用定时器实现相同的功能,将标签的top值逐渐减小,这样标签就会实现上升的效果 4....文字逐渐变淡效果 @keyframes remove { 100% { opacity: 0; } } 逐渐变淡的效果是通过css3动画来实现的很简单,动画是通过js来给元素绑定的...鼠标点击实例化标签,并在点击位置生成 body.addEventListener('click', function (e) { let x = e.pageX; let y = e.pageY

    4.8K30

    腾讯地图SDK实现点击建筑显示围栏及建筑信息效果

    在腾讯地图APP中点击建筑物,会使用轮廓线将该建筑物包围,同时显示建筑物的相关信息,如:名称、地址、距离、电话等等。...如下图所示: [vobavxe8h5.jpeg] 使用场景 点击地图中POI名称,显示该建筑的AOILayer,并且通过腾讯地图SDK的检索功能获取该建筑物的相关信息。...准备 1、腾讯地图3D SDK 2、AOILayer 3、地点检索 核心代码 1、监听点击POI的回调,获取POI信息: - (void)mapView:(QMapView *)mapView didTapPoi...:(QPoiInfo *)poi { // 判断点击的是否为同一个POI,如果相同,则移除当前AOILayer if (_poiName !...以上内容转载自面糊的文章《模仿腾讯地图APP点击建筑效果》 链接:https://www.jianshu.com/p/8ab02aa1d058 来源:简书 著作权归作者所有。

    1.3K31

    JS-制作网页特效——选项卡效果(水平,点击

    //总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div。...className了,而要改成style,上一行的className就要删掉 } //j循环的外边 this.className = "on";//this代指tapLi[i],当前所点击的...,给他添加类名 tapDiv[this.index].className = "";//this.index=tapLi[i].index,具体作用下边alert做调试得知,就是得到一个对应你点击的...这样,给当前被点击li对应的div空类名,去除掉j循环中添加在他身上的hide枷锁,他就得意重见天日了! //这里最后把className忘记了,害得我调试了半天。...--清爽js代码如下--> 1 2 window.onload = function() { 3

    3.5K90

    Android 高德地图API(详细步骤+源码)三

    八、地图点击长按事件   实际开发中都会对地图点击和长按做处理,比如点击某一个地方获取经纬度,下面来操作一下吧。 [在这里插入图片描述] 在initMap()方法中,添加对地图点击和长按的监听。...运行效果图如下所示: [在这里插入图片描述] ③ 添加标点Marker   通常使用地图是会对地图进行标注,添加标点。刚才通过点击地图获取到了经纬度,那么同样可以根据这个经纬度在地图上绘制标点。...,然后增加了一个删除标点的按钮,当点击地图时显示这个浮动按钮,然后点击按钮时清空地图,当然这个清空要稍微麻烦一点,特别是你地图上有多个标点的时候。...⑨ 改变地图中心点   我们在实际使用中通常会有这样的操作,希望点击一下就可以移动到所在地,这其实是比较容易做到的,回顾我们现在是一进入地图就会定位到当前所在地,而当我点击地图上其他位置时,会增加一个标点...[在这里插入图片描述] 嗯,可能GIF上看着效果不是特别的明显,在自己手机上去体验一下就知道了,这个地图平移动画还是很不错的。 下一篇 Android 高德地图API(详细步骤+源码)四

    3.7K31

    SuperMap iClient for JavaScript 新手入门

    SuperMap.js为总库文件,支持所有功能。SuperMap.Includ.js是引用文件,用来在内部统一引用上述JS和其他CSS资源文件。...图层就像一块透明的玻璃,在一块玻璃上画一朵花,在另一块玻璃上画一席草,重叠两块玻璃,由上而下俯视,从而形成图像显示效果地图上呈现丰富的元素也同样是由图层组成。...地图可以添加一个或者多个图层,通过在图层上标记或绘制,组合显示用户所需要的最终效果。...不可见控件: Navigation:地图浏览控件,监听鼠标点击、平移、滚轮等事件来实现对地图的浏览操作。...Step3:上面是调用了天地图官网提供的两个WMTS服务图层叠加后的效果。功能实现主要是依赖SuperMap.Layer.WMTS类来完成。

    3.3K31

    vue2(webpack)调用amap高德地图及其UI组件

    vue2(webpack)调用amap高德地图及其UI组件和标记物 今天一个app项目中要使用vue2加入高德地图,本来以为有第三方的插件,结果没找到适合自己用的,因为地图这块,一般都是自定义程度比较高的...,忽略这一步 http://lbs.amap.com/dev/key/app 2、修改配置 首先要在build/webpack.base.conf.js 加入如下配置,负责vue中使用import会报错...--引入UI组件库(1.0版本) --> 新建一个map.vue组件 在script中引入如下组件...4、地图添加标记物和信息框 marker和infowindow 因为我从后台取到的点是gps定位的点,因为坐标系不同,所以要将gps的点转成高德坐标系的点;点击marker显示infowindow,并给...5、最后本人的效果图 这个title是准备做浮动布局,做返回按钮和标题栏的,还没写css,最后一张是我这块最后做完的效果图 ? ?

    2.5K10

    vue2(webpack)调用amap高德地图及其UI组件vue2(webpack)调用amap高德地图及其UI组件和标记物#

    版开发,更多更详细请阅读官方api 1、申请key### 创建应用,然后申请key,后期要用到,如果已经有key,忽略这一步 2、修改配置### 首先要在build/webpack.base.conf.js...因为后边要使用高德的infowindow,最简单的不好扩展,而且没有点击事件,所以用用到了高德的ui。...--引入UI组件库(1.0版本) --> 新建一个map.vue组件 在script中引入如下组件...这里写图片描述 4、地图添加标记物和信息框 marker和infowindow### 因为我从后台取到的点是gps定位的点,因为坐标系不同,所以要将gps的点转成高德坐标系的点;点击marker显示infowindow...这里写图片描述 5、最后本人的效果图 这个title是准备做浮动布局,做返回按钮和标题栏的,还没写css,最后一张是我项目中最终的效果 ? 这里写图片描述 ?

    1.6K30

    大数据应用--实时路况数据

    现在手机上装个导航软件,如高德地图,百度地图等等都有实时路况显示,导航和道路规划可以根据实时路况来实施,从而动态躲避拥堵,为出行节省时间,为了显示实时路况就必须有路况数据,今天来说下实时数据的获取方法。...一般来说有以下几种典型数据来源获取方法: 1、实时路况数据最主要的收集方式,还是浮动车。这个浮动车包括出租车、长途客车、物流车辆等等,其中主力就是在城市市区里活动的出租车。...理论上浮动车的数量越多,数据的准确率也就越高。北京、上海这些大城市的实时路况数据要比其他城市的更为准确,原因就是大城市出租车的数量多,统计也更为精准。...报告显示:二季度全国重点城市拥堵排名上海居首,登顶“堵王”,杭州、北京、重庆、深圳、广州、福州、沈阳、成都、济南紧随其后。...据介绍,此次报告高德将3亿高德地图导航用户作为数据蓝本,以浮动车数据为佐证,形成动态躲避拥堵城市出行方案。

    1.7K70

    干货 | 技术宅们在家是怎样线上支援疫情的?憋疯了,就来试一试

    1000例 · 全国中小学开学时间 · 全国交通今日恢复正常 ……………… 小N相信,这一切都会很快实现!!...小N秉承“在家躺着也是做贡献”的深邃理念 天天在床上看疫情图数据 但宅在家里实在没事干 某日实在“技痒” 就研究了下如何制作这份疫情地图。 △(效果预览) 1 准备工作 1....在电脑安装 Node.js 语言运行环境,建议大于 8.0 版本。 3. 安装 VS Code 以及 Tencent Serverless Toolkit 插件,或者安装命令行工具。...c=map-usa 下图是模板的效果。你也可以点击该模板右下角的Download按钮将模板的html文件下载下来,然后按自己的喜欢进行编辑改造。...首先,在云函数yiqing的控制台面板里,找到【触发方式】,然后点击任务三中添加过的触发器里的【API 服务名】,进入更详细的网关配置控制台。

    84820

    三种方式制作数据地图

    话不多说,还是先上效果图: 首先是全国省份色温图,点击单选按钮可切换不同指标。...01 — 准备全国各省市矢量图 色温图素材的准备分为三部分: 准备全国各省及分省各城市矢量地图 B.为各省份及各城市的矢量图形添加有意义的名字。...右键点击单选按钮,指定宏。找到以上代码的名称,即“fill_color”程序,选择确定即可。 2.4添加组合框控件 控制单击省份图形时的效果,是显示该省份标签还是向下钻取到该省份各城市。...链接单元格设置为全国map工作表AO4单元格。 2.5为各省份图形添加单击突显效果。...运行如下宏代码,则可以为全国各省份均添加单击突显省份效果

    9.4K20
    领券