js基础教程黑马程序员（如何使用html+css+js实现3D相册）

本文目录

• 如何使用html+css+js实现3D相册
• Web 前端怎样入门
• 前端Vue.js框架是什么

如何使用html+css+js实现3D相册

使用html+css+js实现3D相册，快来上传的照片吧
推荐：《js基础教程》
效果图：
代码如下，复制即可用：
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》Title《/title》
《style》
html,
body {
margin: 0;
padding: 0;
background-color: #29454d;
/*禁止文字被选中*/
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
overflow: hidden;
}
.box {
position: relative;
height: 500px;
width: 500px;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 2000px;
}
.di {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
transform: translate(-50%, -50%) rotatex(90deg);
transform-style: preserve-3d;
}
.z {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
transform-style: preserve-3d;
/*transform: rotatez(1deg);*/
}
p {
margin: 0;
position: absolute;
top: 0;
/*为了保证圆心在父盒子中心，父盒子旋转时圆心稳定，所以设置left*/
left: 25px;
height: 200px;
width: 150px;
border: 2px solid #fd7068;
box-sizing: border-box;
background-color: #ffffff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*opacity: .7;*/
font-size: 10px;
line-height: 200px;
text-align: center;
/*box-shadow: 0 0 100px #16ff8b;*/
/*倒影，不兼容*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
/*backface-visibility: hidden;*/
}
《/style》
《/head》
《body》
《div》
《div》
《div》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《p》可以拖拽图片文件进来《/p》
《/div》
《/div》
《/div》
《script》
window.onload = function () {
setPs();
move();
drop();
}
//给每个p标签设置位置
function setPs() {
var ps = document.getElementsByTagName(’p’);
for (var i = 0; i 《 ps.length; i++) {
ps.style.transform = ’rotatex(-90deg) rotatey(’ + i * 30 + ’deg) translatez(400px)’
}
}
//鼠标拖动旋转
function move() {
var zBox = document.querySelector(’.z’);
var xBox = document.querySelector(’.di’);
//声明计算鼠标移动速度用的变量
var speedTimer = null;
var speedX = 0;
var speedY = 0;
//声明记录旋转角度的两个变量
var xDegNow = 90;
var zDegNow = 0;
//声明变量记录要旋转的角度
var xDegDistance = 0;
var zDegDistance = 0;
//声明变量记录是否发生鼠标移动事件
var isMove = false;
window.onmousedown = function (e) {
//鼠标按下
//清除过渡属性
xBox.style.transition = ’’;
zBox.style.transition = ’’;
//记录按下的坐标以及计算速度的初始坐标
var xstart = e.clientX;
var speedX_start = xstart;
var ystart = e.clientY;
var speedY_start = ystart;
//记录用来计算速度的初始时间
var tstart = new Date().getTime();
var tnow = tstart;
//设置计时器更新计算速度的当时时间
speedTimer = setInterval(function () {
tnow = new Date().getTime();
},10)
window.onmousemove = function (e) {
//鼠标移动
isMove = true;
//记录当时的坐标计算距离
var xnow = e.clientX;
var ynow = e.clientY;
var xDistance = xnow - xstart;
var yDistance = ynow - ystart;
//如果计时超过一定时间（10毫秒），计算速度
if (tnow - tstart 》= 10) {
//速度=（现在的坐标-初始坐标）/（现在时间-初始时间）
speedX = (xnow - speedX_start) / (tnow - tstart);
speedY = (ynow - speedY_start) / (tnow - tstart);
//让初始时间和坐标等于现在的时间和坐标
tstart = tnow;
speedX_start = xnow;
speedY_start = ynow;
}
//把鼠标移动距离计算成角度后设置到页面上
zDegDistance = zDegNow - (xDistance / 10);
zBox.style.transform = ’rotatez(’ + zDegDistance + ’deg)’;
xDegDistance = xDegNow - (yDistance / 10);
xDegDistance = xDegDistance 》 179 ? 179 : xDegDistance 《 1 ? 1 : xDegDistance;
xBox.style.transform = ’translate(-50%,-50%) rotatex(’ + xDegDistance + ’deg)’;
};
};
window.onmouseup = function (e) {
//鼠标松开
//清除计时器 清除鼠标移动事件
clearTimeout(speedTimer);
window.onmousemove = null;
//判断如果发生移动
if (isMove) {
//添加过渡属性
xBox.style.transition = ’all 0.5s ease-out’;
zBox.style.transition = ’all 0.5s ease-out’;
//根据速度计算目标角度，设置到页面上
zDegDistance = zDegDistance - (speedX * 10);
zBox.style.transform = ’rotatez(’ + zDegDistance + ’deg)’;
xDegDistance = xDegDistance - (speedY * 10);
xDegDistance = xDegDistance 》 179 ? 179 : xDegDistance 《 1 ? 1 : xDegDistance;
xBox.style.transform = ’translate(-50%,-50%) rotatex(’ + xDegDistance + ’deg)’;
//记录当前角度的值更新
xDegNow = xDegDistance;
zDegNow = zDegDistance;
//用到的变量重置
isMove = false;
speedX = 0;
speedY = 0;
xDegDistance = 0;
zDegDistance = 0;
}
};
}
//鼠标拖拽文件
function drop() {
//取消鼠标拖拽文件进入窗口的默认行为
window.ondragover = function (e) {
e.preventDefault();
}
window.ondrop = function (e) {
e.preventDefault();
}
//添加拖拽到p标签的事件
var ps = document.getElementsByTagName(’p’);
for (var i = 0; i 《 ps.length; i++) {
ps.index = i;
ps.ondrop = function (e) {
var w = new FileReader();
w.index = this.index;
w.readAsDataURL(e.dataTransfer.files);
w.onload = function () {
ps.style.backgroundImage = ’url(’ + w.result + ’)’;
ps.innerHTML = ’’;
}
}
}
}
《/script》
《/body》
《/html》

Web 前端怎样入门

给你一套web前端中级程序员学习路线图，含配套视频，前端工具，源码等。

黑马程序员学习路线图及能掌握的能力（总，以下会分阶段，加上配套学习视频，小伙伴可继续往下看！）

第一阶段：HTML5+css

配套学习视频：

前端小白零基础入门HTML5+CSS3

第二阶段：移动web网页开发

配套学习视频：

2018移动web进阶教程

第三阶段：JavaScript网页编程

配套学习视频：

前端与移动开发基础入门到精通

javaScript零基础通关必备教程

第四阶段：Node.js与Ajax

配套学习视频：

Nodejs教程精讲

ajax从入门到精通

第五阶段：vue.js项目实战

配套学习视频：

4小时+5个拣选案例让你快速入门Vue.js

2018年Vue.js深入浅出教程

第六阶段：微信小程序

配套学习视频：

一天教你打造企业级微信小程序

20180316-微信小程序-个人语音接口功能

分分钟快速入门小程序开发

零基础玩转微信小程序

2小时轻松实现人脸识别的小程序

第七阶段：React.js项目实战

配套学习视频：

Reactjs入门教程

ReactJs精品教程

第八阶段：框架阶段与原理

第九阶段：移动APP开发

第十阶段：node.js进阶

第十一阶段：可视化游戏

第十二段阶段：架构与运维

前端学习教程及公开课教程：黑马程序员web前端学习视频 全部

前端Vue.js框架是什么

前端Vue.js框架是什么？有哪些特点？Vue.js是一个前端框架，用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手，让程序员可以更多的时间去关注业务逻辑，Vue框架能够提高开发的效率。

科普时刻 ：

黑马程序员vue前端基础教程-4个小时带你快速入门vue

前端开发利器vue，微信小程序快速开发实战

web前端基础必备教程-2小时玩转Vue单元测试

黑马程序员Vue2.0+Vue3.0入门到精通，大厂前端岗位必备技能

1、Vue.js是什么？

Vue是一个js库，且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

Vue.是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue的MVVM设计模式是什么？

如果了解前端一定知道MVVM和MVC这两种设计模式，且很有可能对mvp也有一些了解。MVC即model，view，control，jQuery就是采用的这种设计模式。MVVM即model，view，viewmodel，是数据驱动模式，即所有的一切通过操作数据来进行而尽量避免操作DOM树。

不关注DOM结构，考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作，而是专心于对用户的操作进行处理，避免MVC中control层过厚的问题。

在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目，在console控制台选择vue面板。在Devtools对象中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项目内Vuex的状况变量信息。

3、Vue.js有哪些优点？

声明式，响应式的数据绑定；组件化的开发；Virtual DOM；响应式的数据绑定
（1）jQuery首先获取到DOM对象，然后对DOM对象进行进行值的修改等操作；
（2）Vue首先把值和js对象进行绑定，然后修改js对象值，Vue框架会自动把DOM的值就行更新；
（3）简单理解为Vue帮我们做了DOM操作，以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue框架会自动做好DOM相关操作；
（4）DOM元素跟随JS对象值的变化而变化叫做单向数据绑定，若JS对象的值也跟随着DOM元素。

4、需要学习哪些Vue.js框架相关知识点？

Vue.js 安装、Vue.js 目录结构、Vue.js 起步、Vue.js 模板语法、Vue.js 条件语句、Vue.js 循环语句、Vue.js 计算属性、Vue.js 监听属性、Vue.js 样式绑定、Vue.js 事件处理器、Vue.js 表单、Vue.js 组件、Vue.js 组件自定义事件、Vue.js 自定义指令、Vue.js 路由、Vue.js 过渡& 动画、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 响应接口、Vue.js 实例等。

Vue.js 是一个JavaScriptMVVM库，一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的，采取自底向上增量开辟的设计。比拟于Angular.js，Vue.js供给了加倍简洁、更易于懂得的API，使得我们快速地上手并应用Vue.js。