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 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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
收音机指标测试方法及仪器
2021/03/01 无线电
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
优秀应届毕业生自荐信
2013/11/16 职场文书
创业计划书六个要素
2013/12/26 职场文书
高中政治教学反思
2014/01/18 职场文书
法学个人求职信范文
2014/01/27 职场文书
大学应届生的自我评价
2014/03/06 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
frg-100简单操作(设置)说明
2022/04/05 无线电