如何花样展示自己的摄影作品?CSS+JS+Html

时间:2023-03-09 16:27:49
如何花样展示自己的摄影作品?CSS+JS+Html

注意:Windows平台推荐使用Edge、Chrome、FireFox,部分浏览器打不开

P.S.慢慢用鼠标在图片上拖拽会感觉更神奇

// 0.5 ? 1 : -1;
},
ease: function (ease, t, b, c, d) {
return b + ease.getRatio(t / d) * c;
},
fibSpherePoint: (function () {
var vec = {x: 0, y: 0, z: 0};
var G = Math.PI * (3 - Math.sqrt(5));

return function (i, n, radius) {
var step = 2.0 / n;
var r, phi;

vec.y = i * step - 1 + (step * 0.5);
r = Math.sqrt(1 - vec.y * vec.y);
phi = i * G;
vec.x = Math.cos(phi) * r;
vec.z = Math.sin(phi) * r;

radius = radius || 1;

vec.x *= radius;
vec.y *= radius;
vec.z *= radius;

return vec;
}
})(),
spherePoint: (function () {
return function (u, v) {
u === undefined && (u = Math.random());
v === undefined && (v = Math.random());

var theta = 2 * Math.PI * u;
var phi = Math.acos(2 * v - 1);

var vec = {};
vec.x = (Math.sin(phi) * Math.cos(theta));
vec.y = (Math.sin(phi) * Math.sin(theta));
vec.z = (Math.cos(phi));

return vec;
}
})()
};

function createTweenScrubber(tween, seekSpeed) {
seekSpeed = seekSpeed || 0.001;

function stop() {
TweenMax.to(tween, 1, {timeScale:0});
}

function resume() {
TweenMax.to(tween, 1, {timeScale:1});
}

function seek(dx) {
var progress = tween.progress();
var p = THREE.Math.clamp((progress + (dx * seekSpeed)), 0, 1);

tween.progress(p);
}

var _cx = 0;

// desktop
var mouseDown = false;
document.body.style.cursor = 'pointer';

window.addEventListener('mousedown', function(e) {
mouseDown = true;
document.body.style.cursor = 'ew-resize';
_cx = e.clientX;
stop();
});
window.addEventListener('mouseup', function(e) {
mouseDown = false;
document.body.style.cursor = 'pointer';
resume();
});
window.addEventListener('mousemove', function(e) {
if (mouseDown === true) {
var cx = e.clientX;
var dx = cx - _cx;
_cx = cx;

seek(dx);
}
});
// mobile
window.addEventListener('touchstart', function(e) {
_cx = e.touches[0].clientX;
stop();
e.preventDefault();
});
window.addEventListener('touchend', function(e) {
resume();
e.preventDefault();
});
window.addEventListener('touchmove', function(e) {
var cx = e.touches[0].clientX;
var dx = cx - _cx;
_cx = cx;

seek(dx);
e.preventDefault();
});
}
//# sourceURL=pen.js
// ]]>