特炫照片墙

多日未更新博客,近日研究了一个3D效果的js照片墙效果

修改了源码中关于无限setTimeout的问题

html页面

特炫照片墙

特炫照片墙

1 <!DOCTYPE html> 2 <html lang="zh-CH"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>漂亮的3D相片展示效果 </title> 7 <meta http-equiv="imagetoolbar" content="false"> 8 <link rel="stylesheet" type="text/css" href="plugin/photowall/wall.css"> 9 </head> 10 11 <body> 12 <div id="screen"> 13 <div id="command"> 14 <h1>bar</h1> 15 点击放大 16 <div id="bar"></div> 17 </div> 18 </div> 19 <script src="plugin/photowall/m3D.js"></script> 20 <script type="text/javascript"> 21 /* ==== start script ==== */ 22 window.onload = function() { 23 // src 是图片位置,可以是相对于路径也可以是绝对路径,甚至是网络图片 24 m3D.init( 25 [ 26 { src: './img/lunbo1.jpg' }, 27 { src: './img/lunbo2.jpg' }, 28 { src: './img/lunbo3.jpg' }, 29 { src: './img/lunbo4.jpg' }, 30 { src: './img/lunbo5.jpg' }, 31 { src: './img/lunbo6.jpg' }, 32 { src: './img/lunbo7.jpg' }, 33 { src: './img/lunbo8.jpg' }, 34 { src: './img/lunbo9.jpg' }, 35 { src: './img/lunbo10.jpg' }, 36 { src: './img/lunbo11.jpg' }, 37 ] 38 ); 39 } 40 </script> 41 </body> 42 43 </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyzdf.html