SVG黑科技排版 | 多个区域可点击淡入显示

最新推荐文章于 2024-04-12 11:26:16 发布
最新推荐文章于 2024-04-12 11:26:16 发布
阅读量498 收藏
点赞数
分类专栏： 模板代码 | SVG公众号互动排版 文章标签： 新媒体运营 svg 前端 内容运营 科技
转载请联系微信号：dong_dian_jun
本文链接：https://blog.csdn.net/h5course/article/details/123014389
版权

模板案例

案例一：点击查看

案例二：点击查看

模板代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
    <title>公众号：懂点君</title>
    <style type="text/css"&
了解本专栏 订阅专栏 解锁全文 超级会员免费看
懂点君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
SVG黑科技排版『多次点击滑动解锁』
懂点君
06-10 233
SVG黑科技排版『多次点击滑动解锁』
SVG黑科技排版 | 点击GIF首图消失并展开长图
懂点君
12-12 666
点击GIF首图消失并展开长图
SVG-与Region，实现地图点击区域
06-01
SVG-与Region，实现地图点击区域
SVG黑科技排版 | 竖版视频遮罩
懂点君
02-09 229
SVG模板代码，复制即可套用！
SVG——显示区域
weixin_34007906的博客
03-30 1201
SVG就像一张无限大的画布，需通过以下的属性给它指定显示区域，尺寸和坐标系统之后才能显示出我们需要的内容。 viewPort viewPort也叫视口，用来控制画布区域的大小，主要通过width和height来指定。 可以指定的单位包括： px em ex pt pc cm mm in 省略单位则默认使用pt。 宽高各100px &l...
【2024更新●SVG案例库】黑科技SVG公众号排版交互图文案例汇总
最新发布
懂点君
04-12 1489
SVG黑科技排版案例库
html5 svg点击图标按钮展开多个图标菜单特效
06-05
本特效正是基于HTML5的SVG特性和JavaScript实现的，通过点击SVG图标按钮，动态展示或隐藏多个SVG图标菜单。 在这款特效中，SVG图标被用作主菜单的触发器。SVG的优势在于，其图形可以无限放大而不会失真，这使得它...
html5 svg点击图标按钮展开多个图标菜单特效.zip
09-23
本资源“html5 svg点击图标按钮展开多个图标菜单特效.zip”包含了一个使用jQuery实现的互动菜单系统，该系统利用了HTML5的SVG元素来创建图标，以及jQuery库的强大功能来控制动画和事件。 SVG（可缩放矢量图形）是一...
基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标
05-07
基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可更换颜色，风格，两千多个图标基于iconpark的svg图标组件，可...
vue动态渲染svg、添加点击事件的实现
10-15
主要介绍了vue动态渲染svg、添加点击事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5 SVG图像渐变淡入淡出动画.rar
07-10
HTML5 SVG图像渐变淡入淡出动画，很四、五种SVG动画效果，从一个图形的建立到绘制完成的整个过程都以动画的形式展示出来，HTML5的SVG都有不错的表现，代替了FLASH动画的效果，而且资源占用率较低，打开源码包后，可逐一浏览各个效果演示。
图片点击svg效果
05-30
点击图片，弹出详情特效
全国行政区域分区SVG格式
08-21
全国行政区域分区SVG格式u，地理数据，将国家行政区分类打包后提供下载，无解压密码，仅供科研参考使用，其他用途请自重
SVG黑科技互动排版『单屏居中滑动』模板代码
懂点君
05-09 438
目录： 添加每屏的内容 构建垂直滑动 单屏垂直居中滑动 单屏水平居中滑动 单屏垂直水平混合居中滑动 公众号懂点君回复单屏居中滑动获取本文全部案例代码 添加每屏的内容 在这里添加6个宽度为345像素，高度为700像素的内容块，为了方便演示，设置了背景颜色。 <section style="width: 345px;margin: 0 auto;"> <!-- 第一屏 --> <section s..
SVG黑科技互动排版『美化地理位置』模板代码
懂点君
05-05 303
目录 设置地图背景 添加地理位置 透明隐藏位置 设置引导区域 设置地图背景 使用SVG标签设置地图背景，viewBox的参数值"0 0图片的宽 图片的高"； 代码 <svg viewBox="0 0 828 1320" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQvRAWiaGKOa0rNicicN85ARfA1NEg1s.
SVG黑科技微信排版『层层左右交错滑开』模板代码
懂点君
07-21 834
模板代码 <section style="overflow: hidden;line-height: 0;" data-author="公众号：懂点君 | 视频号：懂点君"> <!-- 滑动底图 --> <section style="height:0;" data-author="公众号：懂点君 | 视频号：懂点君"> <svg style="display: block;width: 100%;background-posit
有趣的自定义View —— SVG区域点击交互
Chin_Style的博客
10-24 4839
一，前期基础知识储备 实现效果如下：两张SVG图片，实现点击交互，被点击的区域显示特征色。 SVG图片点击交互 1）SVG是什么？ SVG 文件是纯粹的 XML文件。 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损...
SVG黑科技排版『点击多次展开无缝长图』
懂点君
04-07 1559
SVG公众号排版连续点击三次展开无缝长图、点击多次展开无缝长图、点击展开套展开
css 【圆弧】【通过伪类扩大可点击区域】【线性渐变+透明度】【svg画圆+叠加】【滚动条】
Lakeson
12-14 447
通过伪类扩大可点击区域 button { position: relative; /* [其余样式] */ } button::before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; } svg的一个小实现 ==》 先来看...
svg点击不同区域 实现文字显示，svg图片为path格式
04-05
要实现点击不同区域显示不同的文字，可以使用JavaScript来监听svg图形的点击事件，并根据点击的区域来显示对应的文字。 首先，需要在svg图形的path元素上添加一个id属性，用来标识不同的区域。如下所示： ```html <svg> <path id="area1" d="M0 0 L100 0 L100 100 L0 100 Z" /> <path id="area2" d="M100 0 L200 0 L200 100 L100 100 Z" /> <<path id="area3" d="M200 0 L300 0 L300 100 L200 100 Z" /> </svg> ``` 然后，在JavaScript中，可以通过addEventListener()方法来为每个path元素添加点击事件监听器。在监听器中，可以根据点击的元素的id来决定显示哪个文字。如下所示： ```javascript const area1 = document.getElementById('area1'); const area2 = document.getElementById('area2'); const area3 = document.getElementById('area3'); const text = document.getElementById('text'); area1.addEventListener('click', () => { text.textContent = '这是区域1'; }); area2.addEventListener('click', () => { text.textContent = '这是区域2'; }); area3.addEventListener('click', () => { text.textContent = '这是区域3'; }); ``` 其中，text元素用来显示对应的文字。在每个点击事件中，将text元素的textContent属性设置为相应的文字即可。 最终效果如下所示： ```html <svg> <path id="area1" d="M0 0 L100 0 L100 100 L0 100 Z" /> <path id="area2" d="M100 0 L200 0 L200 100 L100 100 Z" /> <<path id="area3" d="M200 0 L300 0 L300 100 L200 100 Z" /> </svg> <div id="text"></div> <script> const area1 = document.getElementById('area1'); const area2 = document.getElementById('area2'); const area3 = document.getElementById('area3'); const text = document.getElementById('text'); area1.addEventListener('click', () => { text.textContent = '这是区域1'; }); area2.addEventListener('click', () => { text.textContent = '这是区域2'; }); area3.addEventListener('click', () => { text.textContent = '这是区域3'; }); </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懂点君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值