< 返回技术文档列表

怎么在JavaScript中利用SVG实现一个图片切换效果

发布时间:2020-12-19 07:05:14⊙投诉举报

本篇文章给大家分享的是有关怎么在JavaScript中利用SVG实现一个图片切换效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

主要知识点

1. SVG 的裁切(遮罩),clip-path 的运用。

2. SVG 利用 JS 更改层级。因为 SVG 不支持 CSS 的 z-index 更改层级,它永远只会让后面的标签盖住前面的标签。

所以,我就利用 JS 的 appendChild 方法,让每次展示的图片,都移动位置到 SVG 的最后---- 话说我真是聪明。

//更改当前图片的层级为最顶层,也就是放到SVG的最后,它会覆盖前面的图片。
bannerSvg.appendChild(pic[index]);

3. 圆圈的放大,我用的是requestAnimationFrame 方法。比传统计时器 setInterval 和 setTimeout 节约资源太多。具体大家可以百度下。

4. 控制块,利用的 DOM 根据展示的图片个数动态生成。

HTML代码

<svgwidth="700"height="393"id="banner">
<defs>
<clipPathid="c1">
<circleid="circle"cx="350"cy="196"r="20"></circle>
</clipPath>
</defs>
<aclass="banner_img"xlink:href="https://www.baidu.com"rel="externalnofollow">
<imagex="0"y="0"xlink:href="images/1.jpg"rel="externalnofollow"></image>
</a>
<aclass="banner_img"xlink:href="https://www.sina.com.cn"rel="externalnofollow">
<imagex="0"y="0"xlink:href="images/2.jpg"rel="externalnofollow"></image>
</a>
<aclass="banner_img"xlink:href="https://www.sohu.com.cn"rel="externalnofollow">
<imagex="0"y="0"xlink:href="images/3.jpg"rel="externalnofollow"></image>
</a>
</svg>
<ulid="ul"class="ul">
<!--空着,等js动态生成-->
</ul>

CSS 代码

.ul{
display:flex;
list-style:none;
}
.ulli{
background:#eee;
padding-left:20px;
padding-right:20px;
margin-left:4px;
margin-right:4px;
}
.ul.on{
background:#f30;
color:#fff;
}

JavaScript 代码

letnowpic=0;
letmyani=null;
letradius=0;
//找标签
letbannerSvg=document.getElementById("banner");
letcircle=document.getElementById("circle");
letul=document.getElementById("ul");
letli=[];
letpic=bannerSvg.querySelectorAll(".banner_img");
//控制块初始化。
for(leti=0;i<=pic.length-1;i++){
//生成li标签
letchildLi=document.createElement("li");
//添加li内容,为当前数字
childLi.innerHTML=i+1;
//把li分别放入ul标签和数组li中。
ul.appendChild(childLi);
li.push(childLi);
}
li[0].classList.add("on");
//遮罩圆动画
letcircleAni=function(){
console.info(radius);
radius+=20;
radius=Math.min(800,radius);
circle.style.r=radius+"px";
myani=requestAnimationFrame(circleAni);
if(radius>=800){
cancelAnimationFrame(myani);
}
};
//显示图片的函数
letshowPic=function(index){
for(leti=0;i<=pic.length-1;i++){
//控制块变化
li[i].classList.remove("on");
//不显示的图片不需要遮罩。
pic[i].children[0].setAttribute("clip-path","");
}
//更改当前图片的层级为最顶层,也就是放到SVG的最后,它会覆盖前面的图片。
bannerSvg.appendChild(pic[index]);
//退出上一步动画
cancelAnimationFrame(myani);
//遮罩圆半径初始化为0
radius=0;
circle.style.r=radius+"px";
//遮罩圆的圆心(也就是位置)随机。
circle.setAttribute("cx",Math.random()*700);
circle.setAttribute("cy",Math.random()*303);
//给指定的图片添加遮罩clip-path
pic[index].children[0].setAttribute("clip-path","url(#c1)");
//执行circle动画
myani=requestAnimationFrame(circleAni);//circle动画

//控制块的变化
li[index].classList.add("on");
}

showPic(0);//默认显示第一张
for(leti=0;i<=li.length-1;i++){
li[i].addEventListener("click",function(){
showPic(i);
});
}

以上就是怎么在JavaScript中利用SVG实现一个图片切换效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注血鸟云行业资讯频道。


/template/Home/Zkeys/PC/Static