纯js超炫酷3D照片墙展示特效

当前位置:主页 > jQuery库 > 图片效果 > 纯js超炫酷3D照片墙展示特效
纯js超炫酷3D照片墙展示特效
分享:

    插件介绍

    这是一款使用纯javaScript制作的超炫酷3D照片墙展示特效。该3D照片墙展示特效支持ie8浏览器,具有响应式效果,点击照片墙缩略图可以将该图片放大居中显示,效果非常酷。

    浏览器兼容性

    浏览器兼容性
    时间:11-02
    阅读:
简要教程

这是一款使用纯javaScript制作的超炫酷3D照片墙展示特效。该3D照片墙展示特效支持ie8浏览器,具有响应式效果,点击照片墙缩略图可以将该图片放大居中显示,效果非常酷。

纯js3D照片墙展示特效-1

纯js3D照片墙展示特效-2

使用方法

该3D照片墙展示特效的核心js文件为3d-tv.js文件,在页面中将其引入。

<script src="3d-tv.js"></script>          
                
HTML结构

该3D照片墙展示特效的HTML结构如下。

<div id="screen"></div>
<div id="bankImages">
  <img alt="" src="images/1.jpg">
  <img alt="" src="images/2.jpg">
  <img alt="" src="images/3.jpg">
  <img alt="" src="images/4.jpg">
  <img alt="" src="images/5.jpg">
  <img alt="" src="images/6.jpg">
  <img alt="" src="images/7.jpg">
  <img alt="" src="images/8.jpg">
  <img alt="" src="images/1.jpg">
  <img alt="" src="images/2.jpg">
  <img alt="" src="images/3.jpg">
  <img alt="" src="images/4.jpg">
  <img alt="" src="images/5.jpg">
  <img alt="" src="images/6.jpg">
  <img alt="" src="images/7.jpg">
  <img alt="" src="images/8.jpg">
</div>
                
初始化插件

在页面的底部,<body>标签结束之前,使用下面的代码来初始化该3D照片墙展示特效。

onresize = tv.resize;
tv.init();