注意: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
// ]]>

如何花样展示自己的摄影作品?CSS+JS+Html的更多相关文章

  1. 如何花样展示自己的摄影作品?强大的WebGL能力展示

    注意:Windows平台推荐使用Edge.Chrome.FireFox,部分浏览器打不开 P.S.慢慢用鼠标在图片上拖拽会感觉更神奇    

  2. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  3. HTML---引入css,js | 常用标签示例

    一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...

  4. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  5. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  6. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  7. 分享一个展示文章列表的CSS样式

    最近在帮朋友处理一个网站前端显示文章列表的时候,其中有个变通的思路,现整理出来留给有需要的朋友参考及自己备忘. 显示效果为:标题左对齐,日期右对齐. 标题和日期中间用常规的原点(“.”) 代替,显示效 ...

  8. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  9. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

随机推荐

  1. [leetcode] Min Stack @ Python

    原题地址:https://oj.leetcode.com/problems/min-stack/ 解题思路:开辟两个栈,一个栈是普通的栈,一个栈用来维护最小值的队列. 代码: class MinSta ...

  2. <a>标签href属性与onclick事件

    a标签主要用来实现页面跳转,可以通过href属性实现,也可以在onclick事件里实现. <a onclick="window.location.href='www.cnblogs.c ...

  3. 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...

  4. 调用CXF工具 生成 WSDL【转】

    在做WebService的时候,生成WSDL是必不可少的一步.我们通常使用的工具就是Axis和CXF. CXF提供了一个命令行工具,可以通过命令来生成Java to WSDL,也可以由WSDL生成Ja ...

  5. BpBinder 转换为 BpCameraService 流程

    interface_cast<ICameraService>(binder) : 其中binder 为IBinder类型,实际为BpBinder interface_cast 定义在IIn ...

  6. [iOS Xcode8]上传AppStore 无法构建版本 没有➕号

    最近iOS10出来了 Xcode也跟着升级到了8 想着App做个更新 于是修改好了代码打算上传新包 ,无奈总是发现构建不了新版本 经过各种蛋疼的查找.我列一下我的经验 1.如果是收费的App,那么是要 ...

  7. Openvswitch原理与代码分析(7): 添加一条流表flow

    添加一个flow,调用的命令为 ovs-ofctl add-flow hello "hard_timeout=0 idle_timeout=0 priority=1 table=21 pkt ...

  8. 【转】mac/linux终端光标的快捷键操作

    摘自网络:原标题是类似linux/unix命令行终端的光标及字符控制快捷键的东东. 常用的快捷键: Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处 ...

  9. Android使用BLE(低功耗蓝牙,Bluetooth Low Energy)

    背景 在学习BLE的过程中,积累了一些心得的DEMO,放到Github,形成本文.感兴趣的同学可以下载到源代码. github: https://github.com/vir56k/bluetooth ...

  10. Java与邮件系统交互之使用Socket验证邮箱是否存在

    最近遇到一个需求:需要验证用户填写的邮箱地址是否真实存在,是否可达.和普通的正则表达式不同,他要求尝试链接目标邮箱服务器并请求校验目标邮箱是否存在. 先来了解 DNS之MX记录 对于DNS不了解的,请 ...