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 模式实例 观察者模式
Oct 24 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP学习记录之数组函数
2018/06/01 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
JS动态显示倒计时效果
2019/12/12 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
全面解读Python Web开发框架Django
2014/06/30 Python
python socket 超时设置 errno 10054
2014/07/01 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python实现五子棋小游戏
2020/03/25 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python如何测试stdout输出
2020/08/10 Python
晚会开场白和结束语
2015/05/29 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
JavaCV实现照片马赛克效果
2022/01/22 Java/Android