-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from front-end-001/master
merge master
- Loading branch information
Showing
374 changed files
with
95,356 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
<style> | ||
.carousel{ | ||
width:500px; | ||
height:300px; | ||
overflow:visible; | ||
white-space: nowrap; | ||
outline: solid 1px blue; | ||
} | ||
.carousel>img{ | ||
width:100%; | ||
height:100%; | ||
display:inline-block; | ||
transition:ease 0.5s; | ||
} | ||
</style> | ||
<div id="container"> | ||
|
||
</div> | ||
<script> | ||
let data = [ | ||
"https://static001.geekbang.org/resource/image/bb/21/bb38fb7c1073eaee1755f81131f11d21.jpg", | ||
"https://static001.geekbang.org/resource/image/1b/21/1b809d9a2bdf3ecc481322d7c9223c21.jpg", | ||
"https://static001.geekbang.org/resource/image/b6/4f/b6d65b2f12646a9fd6b8cb2b020d754f.jpg", | ||
"https://static001.geekbang.org/resource/image/73/e4/730ea9c393def7975deceb48b3eb6fe4.jpg" | ||
]; | ||
|
||
class Carousel { | ||
constructor(container){ | ||
this._container = container; | ||
this._container.classList.add("carousel"); | ||
this._handler = null; | ||
this.data = null; | ||
} | ||
render(){ | ||
for(let d of this.data) { | ||
let e = document.createElement("img"); | ||
e.src = d; | ||
this._container.appendChild(e); | ||
} | ||
let children = Array.prototype.slice.call(container.children); | ||
let position = 0; | ||
let nextFrame = ()=>{ | ||
let nextPosition = position + 1; | ||
|
||
nextPosition = nextPosition % children.length; | ||
|
||
let current = children[position], | ||
next = children[nextPosition]; | ||
//把next摆到正确的位置 | ||
next.style.transition = "ease 0s"; | ||
next.style.transform = `translate(${100 - 100 * nextPosition}%)` | ||
setTimeout(()=>{ | ||
//把current挪出视口 | ||
current.style.transition = ""; //transition置空,css中的属性就会生效 | ||
current.style.transform = `translate(${- 100 - 100 * position}%)` | ||
//把next挪进视口 | ||
next.style.transition = ""; | ||
next.style.transform = `translate(${- 100 * nextPosition}%)` | ||
position = nextPosition; | ||
}, 16); | ||
|
||
|
||
|
||
//for(let child of children) { | ||
// child.style.transform = `translate(${-100 * position}%)`; | ||
//} | ||
setTimeout(nextFrame, 3000); | ||
} | ||
setTimeout(nextFrame,3000); | ||
|
||
} | ||
} | ||
let carousel = new Carousel(document.getElementById("container")); | ||
carousel.data = data; | ||
carousel.render(); | ||
|
||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
<style> | ||
.carousel{ | ||
width:500px; | ||
height:300px; | ||
overflow:visible; | ||
white-space: nowrap; | ||
outline: solid 1px blue; | ||
} | ||
.carousel>img{ | ||
width:100%; | ||
height:100%; | ||
display:inline-block; | ||
transition:ease 0.5s; | ||
} | ||
</style> | ||
<div id="container"> | ||
|
||
</div> | ||
<script> | ||
let data = [ | ||
"https://static001.geekbang.org/resource/image/bb/21/bb38fb7c1073eaee1755f81131f11d21.jpg", | ||
"https://static001.geekbang.org/resource/image/1b/21/1b809d9a2bdf3ecc481322d7c9223c21.jpg", | ||
"https://static001.geekbang.org/resource/image/b6/4f/b6d65b2f12646a9fd6b8cb2b020d754f.jpg", | ||
"https://static001.geekbang.org/resource/image/73/e4/730ea9c393def7975deceb48b3eb6fe4.jpg" | ||
]; | ||
|
||
class Carousel { | ||
constructor(container){ | ||
this._container = container; | ||
this._container.classList.add("carousel"); | ||
this._handler = null; | ||
this.data = null; | ||
} | ||
render(){ | ||
for(let d of this.data) { | ||
let e = document.createElement("img"); | ||
e.src = d; | ||
this._container.appendChild(e); | ||
} | ||
let children = Array.prototype.slice.call(container.children); | ||
let position = 0; | ||
let nextFrame = ()=>{ | ||
let nextPosition = position + 1; | ||
|
||
nextPosition = nextPosition % children.length; | ||
|
||
let current = children[position], | ||
next = children[nextPosition]; | ||
//把next摆到正确的位置 | ||
next.style.transition = "ease 0s"; | ||
next.style.transform = `translate(${100 - 100 * nextPosition}%)` | ||
setTimeout(()=>{ | ||
//把current挪出视口 | ||
current.style.transition = ""; //transition置空,css中的属性就会生效 | ||
current.style.transform = `translate(${- 100 - 100 * position}%)` | ||
//把next挪进视口 | ||
next.style.transition = ""; | ||
next.style.transform = `translate(${- 100 * nextPosition}%)` | ||
position = nextPosition; | ||
}, 16); | ||
|
||
|
||
|
||
//for(let child of children) { | ||
// child.style.transform = `translate(${-100 * position}%)`; | ||
//} | ||
setTimeout(nextFrame, 3000); | ||
} | ||
// setTimeout(nextFrame,3000); | ||
|
||
} | ||
} | ||
let carousel = new Carousel(document.getElementById("container")); | ||
carousel.data = data; | ||
carousel.render(); | ||
|
||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
<style> | ||
.carousel{ | ||
width:500px; | ||
height:300px; | ||
overflow:hidden; | ||
white-space: nowrap; | ||
outline: solid 1px blue; | ||
} | ||
.carousel>img{ | ||
width:100%; | ||
height:100%; | ||
display:inline-block; | ||
transition:ease 0.5s; | ||
} | ||
</style> | ||
<div id="container"> | ||
|
||
</div> | ||
<script> | ||
let data = [ | ||
"https://static001.geekbang.org/resource/image/bb/21/bb38fb7c1073eaee1755f81131f11d21.jpg", | ||
"https://static001.geekbang.org/resource/image/1b/21/1b809d9a2bdf3ecc481322d7c9223c21.jpg", | ||
"https://static001.geekbang.org/resource/image/b6/4f/b6d65b2f12646a9fd6b8cb2b020d754f.jpg", | ||
"https://static001.geekbang.org/resource/image/73/e4/730ea9c393def7975deceb48b3eb6fe4.jpg" | ||
]; | ||
|
||
class Carousel { | ||
constructor(container){ | ||
this._container = container; | ||
this._container.classList.add("carousel"); | ||
this._handler = null; | ||
this.data = null; | ||
} | ||
render(){ | ||
for(let d of this.data) { | ||
let e = document.createElement("img"); | ||
e.src = d; | ||
this._container.appendChild(e); | ||
} | ||
let children = Array.prototype.slice.call(container.children); | ||
let position = 0; | ||
let nextFrame = ()=>{ | ||
let nextPosition = position + 1; | ||
|
||
nextPosition = nextPosition % children.length; | ||
|
||
let current = children[position], | ||
next = children[nextPosition]; | ||
//把next摆到正确的位置 | ||
next.style.transition = "ease 0s"; | ||
next.style.transform = `translate(${100 - 100 * nextPosition}%)` | ||
|
||
requestAnimationFrame(()=>{ | ||
requestAnimationFrame(()=>{ | ||
//把current挪出视口 | ||
current.style.transition = ""; //transition置空,css中的属性就会生效 | ||
current.style.transform = `translate(${- 100 - 100 * position}%)` | ||
//把next挪进视口 | ||
next.style.transition = ""; | ||
next.style.transform = `translate(${- 100 * nextPosition}%)` | ||
position = nextPosition; | ||
}); | ||
}) | ||
|
||
//for(let child of children) { | ||
// child.style.transform = `translate(${-100 * position}%)`; | ||
//} | ||
setTimeout(nextFrame, 3000); | ||
} | ||
//setTimeout(nextFrame,3000); | ||
let startX; | ||
let startTransform; | ||
let start = event =>{ | ||
event.preventDefault(); | ||
startX = event.clientX; | ||
startTransform = - position * 500; | ||
this._container.addEventListener("mousemove", move); | ||
this._container.addEventListener("mouseup", end); | ||
} | ||
let move = event =>{ | ||
event.preventDefault(); | ||
for(let child of children) { | ||
child.style.transition = "ease 0s"; | ||
child.style.transform = `translate(${startTransform + event.clientX - startX}px)`; | ||
} | ||
|
||
} | ||
|
||
let end = ()=>{ | ||
this._container.removeEventListener("mousemove", move); | ||
this._container.removeEventListener("mouseup", end); | ||
|
||
position = - (Math.round((startTransform + event.clientX - startX) / 500)); | ||
|
||
|
||
position = Math.max(0, Math.min(position, children.length - 1)); | ||
|
||
for(let child of children) { | ||
child.style.transition = ""; | ||
child.style.transform = `translate(${ - position * 500}px)`; | ||
} | ||
} | ||
|
||
this._container.addEventListener("mousedown",start); | ||
|
||
|
||
} | ||
} | ||
let carousel = new Carousel(document.getElementById("container")); | ||
carousel.data = data; | ||
carousel.render(); | ||
|
||
</script> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>slideshow</title> | ||
</head> | ||
<style> | ||
.carousel{ | ||
width:500px; | ||
height:300px; | ||
overflow:hidden; | ||
white-space: nowrap; | ||
} | ||
.carousel>img{ | ||
width:100%; | ||
height:100%; | ||
display:inline-block; | ||
transition:ease 0.5s; | ||
} | ||
</style> | ||
<body> | ||
<div id="container" class="container"></div> | ||
<script> | ||
let container = document.getElementById('container'); | ||
container.classList.add("carousel"); | ||
let data = [ | ||
"https://static001.geekbang.org/resource/image/bb/21/bb38fb7c1073eaee1755f81131f11d21.jpg", | ||
"https://static001.geekbang.org/resource/image/1b/21/1b809d9a2bdf3ecc481322d7c9223c21.jpg", | ||
"https://static001.geekbang.org/resource/image/b6/4f/b6d65b2f12646a9fd6b8cb2b020d754f.jpg", | ||
"https://static001.geekbang.org/resource/image/74/e4/730ea9c393def7975deceb48b3eb6fe4.jpg" | ||
]; | ||
//quota指配额,messages指信息数组 | ||
function appendImgBox(quota,messages){ | ||
for(let i = 0;i < quota;i++) { | ||
let imgBox = setImgBox(messages[i].title,messages[i].title,messages[i].url,messages[i].imgStyle); | ||
container.appendChild(imgBox); | ||
} | ||
} | ||
function setImgBox(title,style,url,imgStyle) { | ||
let createDiv = document.createElement('div'); | ||
createDiv.title = title; | ||
createDiv.style = style; | ||
let createImg = document.createElement('img'); | ||
img.src = url; | ||
img.style = imgStyle; | ||
return createDiv; | ||
} | ||
|
||
appendImgBox(3,data); | ||
|
||
|
||
|
||
|
||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>Document</title> | ||
<style> | ||
div{ | ||
width: 100px; | ||
height: 100px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div style="background: red;"></div> | ||
<div style="background: green;"></div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
//022-2组-张廷军 | ||
1.配置图片,可以选择限额 参数,提供 顺序、命名 参数 | ||
2.配置动画效果参数,以及每种动画帧数参数 | ||
3.下面的小点是否显示,可以提供参数控制,以及小点不同样式的参数 | ||
4.左右的点击按钮是否显示参数,以及选择左右按钮样式的参数,,提供对应的样式参数 | ||
5.提供开始结束动画时间的参数 | ||
6.提供回调函数,回调函数里面提供对应的数据和方法,让调用者的根据需求处理对应的业务逻辑 | ||
|
||
|
||
|
||
P0: | ||
1. 轮播需求 | ||
1.1 展示一个序列的图片 | ||
1.2 每隔?秒通过动画,切换到下一张图片 | ||
1.2.1 P2:选择合适的时间和动画形式 | ||
1.3 P1:循环播放 | ||
1.4 P1:展示指示器 | ||
1.5 P1:展示文字标题 | ||
2. 点击需求 | ||
2.1 点击图片,跳转到链接 | ||
2.2 P1:点击文字标题 | ||
P1: | ||
3. 手势/鼠标操作轮播 | ||
3.1 拖拽图片,跟随手指/鼠标移动 | ||
3.2 停止拖拽,播放动画弹到最近的一张图 | ||
3.2.1 注意边界 | ||
4. 鼠标悬停展示左右操作按钮 | ||
4.1 鼠标悬停,展示向左翻页和向右翻页按钮 | ||
4.1.1 P2:第一张图没有向左按钮,最后一张图没有向右按钮 | ||
4.2 点击向左按钮向前播放,点击向右按钮向后播放 |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.