图片/图形
楼盘模型360度旋转动画效果
PetitQ
这是一款使用 css3 和 js 制作的楼盘模型 360 度旋转动画。这种效果你一定曾今在科幻电影中看到过。这个 js 3d 动画中整个楼盘模型绕一个中心点不断的做 360 度旋转，3d 效果十分逼真。看过《生化危机》吗？一演到地下实验室的时候都会一段整个建筑 3D 旋转的效果。本插件的楼盘模型 360 度旋转效果就和那种效果类似。
HTML 部分
只需要一个空的 div，然后在运行时用 js 往里面插入需要的节点。
也想出现在这里？联系我们吧
<div id="demo"></div>
JAVASCRIPT
var D = {
base: 6,
size: 40,
space: 6,
height: {
min: 10,
max: 80
},
type: ['a', 'b', 'c', 'd', 'e'],
bldg: '<a><b><b><b><i></i></b></b></b></a>',
Random: function(min, max) {
var value = Math.random() * (max - min) + min;
return Math.round(value);
},
Build: function() {
for (var x = 0; x < D.base; x++) {
for (var y = 0; y < D.base; y++) {
var e = D.data[x * D.base + y];
var w = D.Random(D.space, D.size - D.space);
var h = D.Random(D.space, D.size - D.space);
var l = D.Random(D.space / 2, D.size - w);
var t = D.Random(D.space / 2, D.size - h);
var z = D.Random(D.height.min, D.height.max);
var i = D.Random(0, D.type.length - 1);
var c = e.getElementsByTagName('*');
e.className = D.type[i];
e.style.width = w + 'px';
e.style.height = h + 'px';
e.style.left = x * D.size + l + 'px';
e.style.top = y * D.size + t + 'px';
c[0].style.height = z + 'px';
c[1].style.width = h + 'px';
c[2].style.width = w + 'px';
c[3].style.width = h + 'px';
c[4].style.width = h + 'px';
c[4].style.height = w + 'px';
}}},
Create: function() {
for (var i = 0; i < D.base * D.base; i++) {
var div = document.createElement('div');
div.innerHTML = D.bldg;
D.demo.appendChild(div);
}D.data = D.demo.getElementsByTagName('div');
},
Init: function() {
var l = D.base * D.size;
D.demo = document.getElementById('demo');
D.demo.style.width = D.demo.style.height = l + 'px';
D.demo.style.marginTop = D.demo.style.marginLeft = -l / 2 + 'px';
D.demo.addEventListener('click', D.Build, false);
},
Run: function() {
D.Init();
D.Create();
D.Build();
}};
D.Run();
css 部分请参考下载文件中的代码。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
