diff --git a/.gitignore b/.gitignore index 8ad4835..070a0fd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ *.min.js *.min.css +./index.html \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..26b6491 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,12 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "taskName": "echo", + "type": "shell", + "command": "echo Hello" + } + ] +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ed4a21f --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + first example + + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/js/lib/prism/highlight.scss b/js/lib/prism/highlight.scss index aab39b4..7d0bf91 100644 --- a/js/lib/prism/highlight.scss +++ b/js/lib/prism/highlight.scss @@ -1,9 +1,9 @@ @charset "UTF-8"; /** - * + * * @authors yutent (yutent@doui.cc) * @date 2017-02-13 13:53:38 - * + * */ /*代码块*/ @@ -41,7 +41,7 @@ .c-keyword, .c-selector, .c-operator {color: #d81406;} - + .c-keyword {font-style:italic;} } } diff --git a/js/lib/sliders/sliders/main.css b/js/lib/sliders/sliders/main.css new file mode 100644 index 0000000..60bc1ac --- /dev/null +++ b/js/lib/sliders/sliders/main.css @@ -0,0 +1 @@ +.do-sliders{position:relative;height:100%;width:100%;overflow:hidden}.do-sliders .box{height:100%;width:100%;transition:.4s}.do-sliders .slider-btn{position:absolute;top:50%;margin-top:-15px;width:30px;height:30px;text-decoration:none;font-size:30px;line-height:30px;text-align:center;border-radius:100%;background:rgba(0,0,0,0.2);color:#fff;z-index:1}.do-sliders .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .btn{position:relative;bottom:50px;width:50%;height:50px;margin:0 auto;line-height:50px;text-align:center}.do-sliders .btn span{display:inline-block;width:10px;height:10px;margin:20px 10px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.4s}.do-sliders .btn span:hover{background:#1abc9c}.do-sliders .btn .act{background:#16a085}.do-sliders section{display:inline-block;height:100%;vertical-align:middle}.do-sliders section img{width:100%;height:100%;object-fit:cover} diff --git a/js/lib/sliders/sliders/main.htm b/js/lib/sliders/sliders/main.htm new file mode 100644 index 0000000..cc8ae76 --- /dev/null +++ b/js/lib/sliders/sliders/main.htm @@ -0,0 +1,26 @@ +
+ {{leftButton ? leftButton : '<'}} +
+
+ + {{el.title}} +
+
+ +
+ +
+ + {{rightButton ? rightButton : '>'}} +
\ No newline at end of file diff --git a/js/lib/sliders/sliders/main.js b/js/lib/sliders/sliders/main.js new file mode 100644 index 0000000..cc89278 --- /dev/null +++ b/js/lib/sliders/sliders/main.js @@ -0,0 +1,74 @@ +/** + * + * @authors linteng (875482941@qq.com) + * @date 2017-09-07 19:53:18 + */ + +define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){ + + function setWidth(){ + + var dom = document.querySelector('.do-sliders') + var width = window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px' + return width + } + + return yua.component("sliders", { + $template: tpl, + $construct: function(a, b, c){ + yua.mix(a, b, c) + return a + }, + $init: function(vm){ + vm.slideList = [{src: '../test/images/1.jpeg'}, {src: '../test/images/2.jpg'}, {src: '../test/images/3.jpeg'}, {src: '../test/images/4.jpeg'}] + vm.$go = function(ev, num){ + vm.curr += num + if(vm.curr < 0){ + vm.curr = vm.slideList.length - 1 + }else if(vm.curr > vm.slideList.length - 1){ + vm.curr = 0 + } + } + + vm.$jump = function(ev, i){ + vm.curr = i + } + + + vm.$watch('curr', function(val, old) { + vm.currWidth = setWidth() + var width + if(vm.currWidth.indexOf('px') > -1) + width = vm.currWidth.slice(0, vm.currWidth.indexOf('px')) + + vm.transform = 'transform: translate(' + (-width * val) + 'px, 0);' + }) + + window.addEventListener('resize', function(){ + vm.currWidth = setWidth() + var width + if(vm.currWidth.indexOf('px') > -1) + width = vm.currWidth.slice(0, vm.currWidth.indexOf('px')) + + vm.transform = 'transform: translate(' + (-width * vm.curr) + 'px, 0);' + }, false) + + }, + $ready: function(vm){ + vm.currWidth = setWidth() + }, + slideList: [], + curr: 0, + currWidth: 0, + transform: '', + $jump: function(ev, i){ + + }, + $go: yua.noop, + leftButton: '', + rightButton: '' + }) + + yua.scan() + +}) \ No newline at end of file diff --git a/js/lib/sliders/sliders/main.scss b/js/lib/sliders/sliders/main.scss new file mode 100644 index 0000000..f28f87a --- /dev/null +++ b/js/lib/sliders/sliders/main.scss @@ -0,0 +1,31 @@ +@charset "UTF-8"; +/** + * + * @authors Lincoln (875482941@qq.com) + * @date 2017-09-07 20:32:11 + * @version $Id$ + */ + +@import "../../../css/var.scss"; + +.do-sliders {position: relative;height: 100%;width: 100%;overflow: hidden; + + .box {height: 100%;width: 100%;transition: .4s;} + + .slider-btn {position: absolute;top: 50%;margin-top: -15px;width: 30px;height: 30px;text-decoration: none;font-size: 30px;line-height: 30px;text-align: center;border-radius: 100%;background: rgba(0,0,0,.2);color: #fff;z-index: 1;} + .slider-btn:nth-of-type(1){margin-left: 20px;} + .slider-btn:nth-of-type(2){right: 0;margin-right: 20px;} + + .btn {position: relative;bottom: 50px;width: 50%;height: 50px;margin: 0 auto;line-height: 50px;text-align: center; + + span {display: inline-block;width: 10px;height: 10px;margin: 20px 10px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .4s;} + span:hover{background:nth($cg, 1);} + .act{background:nth($cg, 3);} + } + + section {display: inline-block;height: 100%;vertical-align: middle; + + img {width: 100%;height: 100%;object-fit: cover;} + + } +} \ No newline at end of file diff --git a/js/lib/sliders/sliders/test/images/1.jpeg b/js/lib/sliders/sliders/test/images/1.jpeg new file mode 100644 index 0000000..a832345 Binary files /dev/null and b/js/lib/sliders/sliders/test/images/1.jpeg differ diff --git a/js/lib/sliders/sliders/test/images/2.jpg b/js/lib/sliders/sliders/test/images/2.jpg new file mode 100644 index 0000000..bff5c71 Binary files /dev/null and b/js/lib/sliders/sliders/test/images/2.jpg differ diff --git a/js/lib/sliders/sliders/test/images/3.jpeg b/js/lib/sliders/sliders/test/images/3.jpeg new file mode 100644 index 0000000..6b17022 Binary files /dev/null and b/js/lib/sliders/sliders/test/images/3.jpeg differ diff --git a/js/lib/sliders/sliders/test/images/4.jpeg b/js/lib/sliders/sliders/test/images/4.jpeg new file mode 100644 index 0000000..088d196 Binary files /dev/null and b/js/lib/sliders/sliders/test/images/4.jpeg differ diff --git a/js/lib/sliders/sliders/test/index.html b/js/lib/sliders/sliders/test/index.html new file mode 100644 index 0000000..23031bb --- /dev/null +++ b/js/lib/sliders/sliders/test/index.html @@ -0,0 +1,36 @@ + + + + + +Examples + + + + + + + +
+ +
+ + + + \ No newline at end of file