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 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
基于JavaScript实现瀑布流布局
Aug 15 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
php实现随机显示图片方法汇总
2015/05/21 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
如何实现一个webpack模块解析器
2018/10/24 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
React自定义hook的方法
2022/06/25 Javascript