闲暇时间，把自己的一些资料整理一下，这里展示的是一个3D的立体相册页面，因为是动态的相册，整体一直在缓慢逆时针旋转，截图只能展示静态的，看起来没实际效果那么美观。 有个需要注意的地方就是小图片不用在乎尺寸，但是前置图片需要255*255像素的正方形图片，不过用电脑自带的图片编辑就可以改尺寸。
每隔几秒中间会跳出一张前置图片，有点惊喜感，如下图所示：
整个相册一共由200张小图片做成背景，一张大图片为前置图片，因为文件数量有点多，这里展示部分代码
sphere.html<!DOCTYPE html> <html> <head> <title>致青春</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/animate.min.css"> </head> <body> <script src="js/table.js"></script> <script src="js/jquery.min.js"></script> <script src="js/three.js"></script> <script src="js/tween.min.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/CSS3DRenderer.js"></script> <div id="container"></div> <div id="info">致青春</div> <div id="menu"> <button id="table">表格</button> </div> <div class="show_info animated" style="display:none;"> <div class="info_my"> <img src="img/cc.png" /> <div class="info_mem"> <div class="nickname">鞠婧祎</div> <div class="id">ID:女神</div> <div class="vote">性别:女</div> </div> </div> <div class="intro">当岁月老去，我依然记得曾经夕阳下我们美好的誓言! ，你的过去我来不及参与,你的未来我奉陪到底.</div> </div> <script> var personArray = new Array; var CurPersonNum = 0; // animate var _in = ['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','slideInDown','slideInLeft','slideInRight']; var _out = ['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideOutDown','slideOutLeft','slideOutRight']; // 模拟推送数据 var s = setInterval(function(){ // get animate var rand_in = parseInt(Math.random() * _in.length,10); var rand_out = parseInt(Math.random() * _out.length,10); if(CurPersonNum >= personArray.length){ CurPersonNum = 0; } $('.show_info').show(); $('.show_info').addClass(_in[rand_in]); setTimeout(function(){ $('.show_info').removeClass(_in[rand_in]); // 更改展示的图片 var img = document.getElementsByClassName('element')[CurPersonNum].getElementsByTagName('img')[0]; img.setAttribute('src','img/aa.png'); ++CurPersonNum; setTimeout(function(){ $('.show_info').addClass(_out[rand_out]); setTimeout(function(){ $('.show_info').removeClass(_out[rand_out]); $('.show_info').hide(); },1000); },1500); },1000); },4500); // 生成虚拟数据 for(var i=0;i<=199;i++){ personArray.push({ image: "img/aa.png" }); } var table = new Array; for (var i = 0; i < personArray.length; i++) { table[i] = new Object(); if (i < personArray.length) { table[i] = personArray[i]; table[i].src = personArray[i].thumb_image; } table[i].p_x = i % 20 + 1; table[i].p_y = Math.floor(i / 20) + 1; } var camera, scene, renderer; var controls; var objects = []; var targets = { table: [], sphere: [], helix: [], grid: [] }; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 3000; scene = new THREE.Scene(); // table for ( var i = 0; i < table.length; i ++ ) { var element = document.createElement( 'div' ); element.className = 'element'; element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')'; var img = document.createElement('img'); img.src = table[ i ].image; element.appendChild( img ); var object = new THREE.CSS3DObject( element ); object.position.x = Math.random() * 4000 - 2000; object.position.y = Math.random() * 4000 - 2000; object.position.z = Math.random() * 4000 - 2000; scene.add( object ); objects.push( object ); // 表格需要坐标进行排序的 var object = new THREE.Object3D(); object.position.x = ( table[ i ].p_x * 140 ) - 1330; object.position.y = - ( table[ i ].p_y * 180 ) + 990; targets.table.push( object ); } //渲染 renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.domElement.style.position = 'absolute'; document.getElementById( 'container' ).appendChild( renderer.domElement ); // 鼠标控制 controls = new THREE.TrackballControls( camera, renderer.domElement ); controls.rotateSpeed = 0.5; controls.minDistance = 500; controls.maxDistance = 6000; controls.addEventListener( 'change', render ); var button = document.getElementById( 'table' ); button.addEventListener( 'click', function ( event ) { transform( targets.table, 1000 ); }, false ); transform( targets.table, 2000 ); // window.addEventListener( 'resize', onWindowResize, false ); } function transform( targets, duration ) { TWEEN.removeAll(); for ( var i = 0; i < objects.length; i ++ ) { var object = objects[ i ]; var target = targets[ i ]; new TWEEN.Tween( object.position ) .to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); new TWEEN.Tween( object.rotation ) .to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); } new TWEEN.Tween( this ) .to( {}, duration * 2 ) .onUpdate( render ) .start(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); render(); } function animate() { // 让场景通过x轴或者y轴旋转 & z // scene.rotation.x += 0.011; scene.rotation.y += 0.008; requestAnimationFrame( animate ); TWEEN.update(); controls.update(); // 渲染循环 render(); } function render() { renderer.render( scene, camera ); } </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
