图片/图形

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

面包多

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="3d-tv.js"></script>

HTML 结构

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

  1. <div id="screen"></div>
  2. <div id="bankImages">
  3.   <img alt="" src="images/1.jpg">
  4.   <img alt="" src="images/2.jpg">
  5.   <img alt="" src="images/3.jpg">
  6.   <img alt="" src="images/4.jpg">
  7.   <img alt="" src="images/5.jpg">
  8.   <img alt="" src="images/6.jpg">
  9.   <img alt="" src="images/7.jpg">
  10.   <img alt="" src="images/8.jpg">
  11.   <img alt="" src="images/1.jpg">
  12.   <img alt="" src="images/2.jpg">
  13.   <img alt="" src="images/3.jpg">
  14.   <img alt="" src="images/4.jpg">
  15.   <img alt="" src="images/5.jpg">
  16.   <img alt="" src="images/6.jpg">
  17.   <img alt="" src="images/7.jpg">
  18.   <img alt="" src="images/8.jpg">
  19. </div>

初始化插件

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

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

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!