开源一个可扩展的WebGL图片切换组件

在线预览

github 地址

参数:

  • el[DOM]:绑定的DOM元素,默认是body

  • images[Array]:需要切换的图片地址的数组,两张。

  • width[Number]:宽。

  • height[Number]:高。

  • transImg[String]:切换效果的图片 url,默认是一张大理石效果的图片。

  • vertexSrc,ragmentSrc[String]:包含 GLSL 程序代码的字符串。

方法:

  • on() 变化图片为第二张。
  • off()变化图片为第一张。
  • toggle()切换图片。
  • onComplete()动画结束时的回调。

示例:

HTML:

1
2
3
4
5
6
7
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script src="./js/TweenMax.min.js"></script>
<script src="./js/gltrans.js"></script>

javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let els = document.querySelectorAll("li");
let arr = [];
for (let i = 0, len = els.length; i < len; i++) {
let test = new GLTransition({
el: els[i],
images: ["./assets/1.jpg", "./assets/2.jpg"],
width: 1024,
height: 512,
});
test.GLTrans();

els[i].querySelector("canvas").addEventListener("click", function (params) {
//切换
test.toggle();
});
els[i]
.querySelector("canvas")
.addEventListener("mouseenter", function (params) {
test.on();
});
els[i]
.querySelector("canvas")
.addEventListener("mouseleave", function (params) {
test.off();
});
}
作者

刘念

发布于

2018-05-20

更新于

2023-11-22

许可协议

评论