技术练习的demo集
2019-11-30 本文已影响0人
洛音轩
demo1 实现优酷轮播图效果
页面效果展示
image.png
image.png
功能：自动轮播，hover停止轮播，点击left/right上一页/下一页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css"></link>
<script src="jquery.js"></script>
</head>
<body>
<div class="wrapper">
<div class="move">
<img src="01.jpg"></img>
</div>
<div class="move">
<img src="02.jpg"></img>
</div>
<div class="move">
<img src="03.jpg"></img>
</div>
<div class="move">
<img src="04.jpg"></img>
</div>
<div class="move">
<img src="05.jpg"></img>
</div>
<div class="move">
<img src="06.jpg"></img>
</div>
<div class="btn btnLeft"> left </div>
<div class="btn btnRight"> right </div>
</div>
<script src="index.js"></script>
</body>
</html>
var oLi = $('.wrapper .move');
var index = 0;
var timer = null;
var flag = true;
function init () {
oLi.css({left: '800px','z-index':'1','top':'50%','height':'0px','margin-top':'0px'});
oLi.eq(0).css({'top':'50%','margin-top':'-90px','height':'180px','width':'250px','left':'0px','opacity':'0.4','z-index':'1'});
oLi.eq(1).css({'top':'0','margin-top':'0px','height':"300px",'width':'400px','left':'200px','opacity':'1','z-index':'100'});
oLi.eq(2).css({'top':'50%','margin-top':'-90px','height':'180px','width':'250px','left':'550px','opacity':'0.4','z-index':'1'});
}
function leftMove () {
if (flag) {
flag = false;
oLi.css({"z-index":'1'});
oLi.eq( index % 6).animate({
'left':'-250px',
'width':'250px;',
'height':'0',
'top':'50%',
'margin-top':'0px',
'opacity':'0'
});
oLi.eq( (index + 1) % 6).animate({
'left':'0px',
'width':'250px',
'height': '180px',
'top':'50%',
'margin-top':'-90px',
'opacity':'0.4'
});
//oLi.css({'z-index':'100'});
oLi.eq( (index + 2) % 6 ).animate({
'left':'200px',
'width':'400px',
'height':'300px',
'top':'0px',
'margin-top':'0px',
'opacity':'1',
'z-index':'100'
});
oLi.eq( (index + 3) % 6 ).css({'left':'800px'});
oLi.eq( (index + 3) % 6).animate({
'left':'550px',
'width':'250px',
'height':'180px',
'top':'50%',
'margin-top':'-90px',
'opacity':'0.4'
},function () {
index++;
flag = true;
});
}
}
function rightMove () {
if (flag) {
flag = false;
oLi.css({'z-index':'1'});
// 最新出来的图片
oLi.eq((index-1) % 6).css({'left':'-250px'});
oLi.eq( (index - 1) % 6).animate({
'left':'0px',
'width':'250px',
'height':'180px',
'top':'50%',
'margin-top':'-90px',
'opacity':'0.4'
});
oLi.eq(index % 6).animate({
'left':'200px',
'width':'400px',
'height':'300px',
'top':'0px',
'margin-top':'0px',
'opacity':'1',
'z-index':'100'
});
oLi.eq((index + 1) % 6).animate({
'left':'550px',
'width':"250px",
'height':'180px',
'top':'50%',
'margin-top':'-90px',
'opacity':'0.4'
});
oLi.eq((index + 2) % 6).animate({
'left':'800px',
'width':'250px',
'height':'0px',
'top':'50%',
'margin-top':'0',
'opacity':'0.4'
},function () {
index--;
flag = true;
});
}
}
$('.btnRight').on('click',function () {
rightMove();
});
$('.btnLeft').on('click',function () {
leftMove();
})
init();
timer = setInterval(leftMove,1000);
$('.wrapper').on('mousemove',function () {
clearInterval(timer);
})
$('.wrapper').on('mouseout',function () {
timer = setInterval(leftMove,1000);
})
* {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
width: 800px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
overflow: hidden;
}
.wrapper .btn {
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: gray;
opacity: 0.2;
cursor: pointer;
z-index: 1000;
}
.wrapper .btn:hover {
opacity: 1;
}
.wrapper .btnLeft {
left: 20px;
}
.wrapper .btnRight {
right: 20px;
}
.wrapper .move {
position: absolute;
top: 50%;
margin-top: -90px;
width: 250px;
height: 180px;
float: left;
opacity: 0.4;
}
.wrapper .move img {
width: 100%;
height: 100%;
}
demo2 利用es6方法实现数据的过滤
// 源数据
var arr = [{
id: 1,
name: 'storeName1',
data: [{
isSplit: true,
id: 1,
name: 'item1',
},
{
isSplit: false,
id: 2,
name: 'item2',
},
{
isSplit: false,
id: 3,
name: 'item3',
},
{
isSplit: true,
id: 4,
name: 'item4',
},
{
isSplit: false,
id: 5,
name: 'item5',
}
]
},
{
id: 2,
name: 'storeName2',
data: [{
isSplit: false,
id: 1,
name: 'item1',
},
{
isSplit: false,
id: 2,
name: 'item2',
},
{
isSplit: true,
id: 3,
name: 'item3',
},
{
isSplit: true,
id: 4,
name: 'item4',
},
{
isSplit: false,
id: 5,
name: 'item5',
},
]
},
{
id: 3,
name: 'storeName3',
data: [{
isSplit: false,
id: 1,
name: 'item1',
},
{
isSplit: false,
id: 2,
name: 'item2',
},
{
isSplit: false,
id: 3,
name: 'item3',
},
{
isSplit: false,
id: 4,
name: 'item4',
},
{
isSplit: false,
id: 5,
name: 'item5',
},
]
},
{
id: 4,
name: 'storeName4',
data: [{
isSplit: false,
id: 1,
name: 'item1',
},
{
isSplit: true,
id: 2,
name: 'item2',
},
{
isSplit: false,
id: 3,
name: 'item3',
},
{
isSplit: true,
id: 4,
name: 'item4',
},
{
isSplit: false,
id: 5,
name: 'item5',
},
]
}
]
// 练习：
// 把arr数组里面同一个storeName下的data数组中数据isSplit为true的单独拉出来
// 生成一个新的对象放入arr中，原先data中isSplit为true的要删掉
// 结合html+css
// 运用es6 数组操作知识
// 如下：
// var arr = [
// {
// id: 1,
// name: 'storeName1',
// data: [
// {
// isSplit: true,
// id: 1,
// name: 'item1'
// },
// ...more,
// ]
// },
// {
// id: 1,
// name: 'storeName1',
// data: [
// {
// isSplit: false,
// id: 2,
// name: 'item2'
// },
// ...more,
// ]
// },
// ...more,
// ]
// dom
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
}
body,
html {
height: 100%;
}
.global {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
width: 100%;
}
.global ul {
background: rgb(233, 93, 251);
width: 100%;
text-align: center;
}
.global .button {
background: rgb(151, 116, 207);
}
.global .button:hover {
cursor: pointer;
}
.global li {
width: 100%;
height: 20px;
background: rgb(250, 7, 189);
}
</style>
<script src="./数组.js"></script>
</head>
<body>
<div class="global">
<ul class="button">
重新排列
</ul>
</div>
<script>
function l(a) {
console.log(a);
}
var global = document.querySelector('.global');
function show(arr) {
for (item in arr) {
var ul = document.createElement('ul');
ul.className = arr[item].name;
ul.innerText = arr[item].name;
var secondArr = arr[item].data;
for (item in secondArr) {
var li = document.createElement('li');
li.innerText = secondArr[item].name;
ul.appendChild(li);
}
global.appendChild(ul);
}
}
function sort(arr) {
var sortArr = [];
for (item in arr) {
var secondArr = arr[item].data;
let trueArr = {
id: "",
name: "",
data: []
};
let falseArr = {
id: "",
name: "",
data: []
};
for (it in secondArr) {
if (secondArr[it].isSplit) {
trueArr.id = arr[item].id;
trueArr.name = arr[item].name;
trueArr.data.push(secondArr[it]);
} else {
falseArr.id = arr[item].id;
falseArr.name = arr[item].name;
falseArr.data.push(secondArr[it]);
}
}
if (trueArr.id) {
sortArr.push(trueArr);
}
if (falseArr.id) {
sortArr.push(falseArr);
}
}
return sortArr;
}
var sortArr = sort(arr);
var button = document.querySelector(".button");
let flag;
show(arr);
button.onclick = function() {
global.innerHTML = "";
flag = !flag;
if (flag) {
show(sortArr);
}
}
</script>
</body>
</html>
排序前
image.png
排序后效果
image.png
