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

最新推荐文章于 2024-04-12 11:26:16 发布

懂点君

最新推荐文章于 2024-04-12 11:26:16 发布

阅读量522

点赞数

分类专栏：模板代码 | SVG公众号互动排版文章标签：新媒体运营 svg 前端内容运营科技

转载请联系微信号：dong_dian_jun

本文链接：https://blog.csdn.net/h5course/article/details/123014389

版权

模板代码 | SVG公众号互动排版专栏收录该内容

54 篇文章 21 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了SVG实现的黑科技排版技术，通过点击多个区域实现内容淡入显示。讲解了模板案例、代码实现及动画原理，包括图片移出显示区域的技巧和淡入动画效果的添加。同时，为了避免重复点击，文章还提出了隐藏已点击区域的方法，并提出使用闪动圆点提示可点击区域的设计思路。

摘要由CSDN通过智能技术生成

模板案例

案例一：点击查看

案例二：点击查看

模板代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

懂点君

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

SVG黑科技排版『多次点击滑动解锁』

懂点君

06-10

243

SVG黑科技排版『多次点击滑动解锁』

SVG黑科技排版 | 点击GIF首图消失并展开长图

懂点君

12-12

686

点击GIF首图消失并展开长图

参与评论您还未登录，请先登录后发表或查看评论

SVG-与Region，实现地图点击区域

06-01

SVG-与Region，实现地图点击区域

SVG黑科技排版 | 竖版视频遮罩

懂点君

02-09

238

SVG模板代码，复制即可套用！

SVG——显示区域

weixin_34007906的博客

03-30

1225

SVG就像一张无限大的画布，需通过以下的属性给它指定显示区域，尺寸和坐标系统之后才能显示出我们需要的内容。 viewPort viewPort也叫视口，用来控制画布区域的大小，主要通过width和height来指定。可以指定的单位包括： px em ex pt pc cm mm in 省略单位则默认使用pt。宽高各100px &l...

SVG黑科技排版 | 双层上下自动对齐滑动，点击图片原生弹出

懂点君

01-07

1001

双层上下自动对齐滑动，点击图片可以原生弹出

SVG黑科技排版『点击多次展开无缝长图』

懂点君

04-07

1590

SVG公众号排版连续点击三次展开无缝长图、点击多次展开无缝长图、点击展开套展开

SVG公众号排版 | 多段自动展开过程会卡住，无法完全展开！

懂点君

12-16

1238

自动展开的过程中会卡住，无法完全展开长图

SVG互动排版 | 展开嵌套多个展开

懂点君

11-15

854

案例效果模板代码 <!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>公众号：懂点

【2024更新●SVG案例库】黑科技SVG公众号排版交互图文案例汇总

最新发布

懂点君

04-12

1970

SVG黑科技排版案例库

HTML5 SVG图像渐变淡入淡出动画.rar

07-10

HTML5 SVG图像渐变淡入淡出动画，很四、五种SVG动画效果，从一个图形的建立到绘制完成的整个过程都以动画的形式展示出来，HTML5的SVG都有不错的表现，代替了FLASH动画的效果，而且资源占用率较低，打开源码包后，可逐一浏览各个效果演示。

图片点击svg效果

05-30

点击图片，弹出详情特效

SVG黑科技互动排版『单屏居中滑动』模板代码

懂点君

05-09

449

目录：添加每屏的内容构建垂直滑动单屏垂直居中滑动单屏水平居中滑动单屏垂直水平混合居中滑动公众号懂点君回复单屏居中滑动获取本文全部案例代码添加每屏的内容在这里添加6个宽度为345像素，高度为700像素的内容块，为了方便演示，设置了背景颜色。 <section style="width: 345px;margin: 0 auto;">  <section s..

SVG黑科技互动排版『美化地理位置』模板代码

懂点君

05-05

324

目录设置地图背景添加地理位置透明隐藏位置设置引导区域设置地图背景使用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

853

模板代码 <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

5082

一，前期基础知识储备实现效果如下：两张SVG图片，实现点击交互，被点击的区域显示特征色。 SVG图片点击交互 1）SVG是什么？ SVG 文件是纯粹的 XML文件。 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损...

css 【圆弧】【通过伪类扩大可点击区域】【线性渐变+透明度】【svg画圆+叠加】【滚动条】

Lakeson

12-14

462

通过伪类扩大可点击区域 button { position: relative; /* [其余样式] */ } button::before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; } svg的一个小实现 ==》先来看...

点击区域是否在某个范围内

wanzhicheng的博客

09-14

852

RectF rectF = new RectF(); p.computeBounds(rectF, true); Region region = new Region(); region.setPath(p, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bo

svg初学——渐变

new_life1207的博客

09-19

363

svg渐变必须在标签中进行定义渐变是一种从一种颜色到另一种颜色的平滑过渡。可以把多个颜色的过渡应用到同一个元素上。线性渐变标签上述标签必须嵌套在的内部线性渐变分为：水平渐变：仅x1和x2不同垂直渐变：仅y1和y2不同角形渐变：x1和x2，y1和y2都不同例子<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBL

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