JavaScript基于SVG的图片切换效果实例代码


Posted in Javascript onDecember 15, 2020

最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了。

昨天还有个同学跟我说,你好久没更新博客了。。

甚为惭愧~~

正好12月来了,今天开一篇。

最近上课讲到了 SVG,不晓得同学们理解到没。 -_-!!!

图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下。

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

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

CSS 代码

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

JavaScript 代码

let nowpic = 0 ;
let myani = null;
let radius = 0;
// 找标签
let bannerSvg = document.getElementById("banner");
let circle = document.getElementById("circle");
let ul = document.getElementById("ul");
let li = [];
let pic = bannerSvg.querySelectorAll(".banner_img");
// 控制块初始化。
for( let i=0 ; i <= pic.length-1 ; i++ ){
  // 生成 li 标签
  let childLi = document.createElement("li");
  // 添加 li 内容,为当前数字
  childLi.innerHTML = i+1 ;
  // 把 li 分别放入 ul 标签 和 数组 li 中。
  ul.appendChild(childLi);
  li.push(childLi);
}
li[0].classList.add("on");
// 遮罩圆动画
let circleAni = function(){
  console.info(radius);
  radius += 20;
  radius = Math.min(800, radius);
  circle.style.r = radius +"px";
  myani = requestAnimationFrame(circleAni);
  if( radius >= 800 ){
    cancelAnimationFrame( myani );
  }
};
// 显示图片的函数
let showPic = function(index){
  for(let i=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( let i=0 ; i<= li.length-1 ; i++ ){
  li[i].addEventListener("click",function(){
    showPic(i);
  });
}

到此这篇关于JavaScript基于SVG的图片切换效果实例代码的文章就介绍到这了,更多相关js svg图片切换效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
json中换行符的处理方法示例介绍
Jun 10 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
8个非常实用的Vue自定义指令
Dec 15 #Vue.js
JavaScript中Object、map、weakmap的区别分析
Dec 15 #Javascript
JavaScript中遍历的十种方法总结
Dec 15 #Javascript
token 机制和实现方式
Dec 15 #Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 #Vue.js
一分钟学会JavaScript中的try-catch
Dec 14 #Javascript
You might like
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
Add a Table to a Word Document
2007/06/15 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python一键升级所有pip package的方法
2017/01/16 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
详解Python中的测试工具
2019/06/09 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
PHP面试题-$message和$$message的区别
2015/12/08 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
村干部培训方案
2014/05/02 职场文书
大学生应聘求职信
2014/05/26 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
大学感恩节活动总结
2015/05/05 职场文书
春节慰问简报
2015/07/21 职场文书
《开国大典》教学反思
2016/02/16 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
详解pytorch创建tensor函数
2022/03/22 Python
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS