Merge pull request #1 from front-end-001/master

merge with front-end-001/master
front-end-001 · Aug 15, 2019 · d3a4cb2 · d3a4cb2
2 parents e3d2d76 + 2ba1ae8
commit d3a4cb2
Show file tree

Hide file tree

Showing 144 changed files with 42,842 additions and 233 deletions.
diff --git a/组件开发项目/id_1908022/slideshow/demo.html b/组件开发项目/id_1908022/slideshow/demo.html
@@ -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>
diff --git a/组件开发项目/id_1908022/slideshow/demo1.html b/组件开发项目/id_1908022/slideshow/demo1.html
@@ -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>
diff --git a/组件开发项目/id_1908022/slideshow/movedemo.html b/组件开发项目/id_1908022/slideshow/movedemo.html
@@ -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>
+
diff --git a/组件开发项目/id_1908022/slideshow/slideshow.html b/组件开发项目/id_1908022/slideshow/slideshow.html
@@ -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>
diff --git a/组件开发项目/id_1908022/slideshow/testTransform.html b/组件开发项目/id_1908022/slideshow/testTransform.html
@@ -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>
diff --git a/组件开发项目/id_1908022/slideshow/需求.md b/组件开发项目/id_1908022/slideshow/需求.md
@@ -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 点击向左按钮向前播放，点击向右按钮向后播放
diff --git a/组件开发项目/id_1908040/NOTE.md b/组件开发项目/id_1908040/NOTE.md