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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
Django使用多数据库的方法
Sep 06 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
js图片无缝滚动插件使用详解
May 26 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
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python科学画图代码分享
2017/11/29 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python实现多进程代码示例
2018/10/31 Python
Django 路由控制的实现代码
2018/11/08 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python实现两个文件夹的同步
2019/08/29 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
python实现简单猜单词游戏
2020/12/24 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
造型师求职自荐信
2013/09/27 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
计算机网络专业求职信
2014/06/05 职场文书
选秀节目策划方案
2014/06/06 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
Redis 限流器
2022/05/15 Redis