您的位置：首页 > Web前端 > JQuery

jQuery结合flex能够碰撞出什么样的火花呢？

2017-12-08 20:51 344 查看

知识点：HTML布局思想, div盒子模型, flex弹性布局, 新老布局分析对比 ,jQuery插件使用,jQuery动画与控制台操作,动画序列,前端学习思维分享。

<!doctype html> 
<html> 
<head> 
<title>web前端0基础实战</title> 
<meta charset='utf-8'> 

<meta name='keywords' content='0.0'>

<meta name='description' content='欢迎来到web前端分享，谢谢各位捧场'>
<style> /*css样式库衣柜统一存放标签的样式*/
*{ /*通配符选择器*/
margin:0; /*清除默认外边距*/
padding:0; /*清除默认内边距*/
}
body{ /*标签选择器*/
background:#000;
}
#wrap{ /*id选择器 #+id名称 +{}*/

width:1200px; /*属性名称 : 属性值单位 ;*/
height:580px; /*设置高度*/

margin:50px auto; /*外边距上下50px 左右自动(居中)*/
}
#wrap ul{
display:flex; /*开启弹性盒模型布局模式*/
justify-content:space-around;/*设置主轴方向排列模式*/
align-items:center; /*辅轴的排列方式居中*/
flex-wrap:wrap;/*设置排列换行强制换行*/
width:100%; /*百分比设置宽度*/
height:90%;
}
#wrap ul li{
list-style:none; /*默认列表索引样式清除*/
width:288px;
height:162px;
border:1px solid #222; /*边框线粗细样式颜色*/
cursor:pointer;/*手指*/
}
#wrap ul li img{
display:block; /*成块级别元素显示结构性*/
width:100%;
height:100%;
}

#wrap .console{
display:flex;
flex-dirction:row; /*设置主轴排列方式*/
justify-content:space-around;
align-items:center;
width:100%;
height:10%;

}

#wrap .console span{
display:block;
width:45px;
height:45px;
background:url('images/console.png') no-repeat;
cursor:pointer; /*设置鼠标样式*/
}
#wrap .console span.prev{
background-position:-28px center;
}
#wrap .console span.grid{
background-position:8px center;
}
#wrap .console span.next{
background-position:-68px center;
}
</style>
</head>
<body>
<div id='wrap'>
<ul>
<li>
<img src='images/1.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/2.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/3.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/4.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/5.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/6.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/7.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/8.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/9.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/10.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/11.jpg' width='1920' height='1080' alt='测试'>
</li>
<li>
<img src='images/12.jpg' width='1920' height='1080' alt='测试'>
</li>
</ul>
<div class='console'>
<span class='prev'></span>
<span class='grid'></span>
<span class='next'></span>
</div>
</div>
</body>
<script src='js/jQuery.js'></script>
<script> //JavaScript是一门基于原型的动态解释性脚本语言
var $li = $('#wrap ul li'); //获取li标签集合 12个li标签的集合
var length=$li.length; //获取li的个数 12
var $next=$('.next'); //获取下一张按钮
var $prev=$('.prev'); //获取上一张按钮

/* 谁在什么时候/触发了什么事件谁做了什么事情 */
// li 被点击 .click() function(){}

/*
点击li 让所有的li按照序号依次小时
fadeOut 淡出隐藏 fadeIn 淡入 eq下标所引起器

点击下一张让index++;

*/
var index=0; //初始化被选择的li的下标从零开始数
$li.click(function(){
index=$(this).index(); //获取当前点击的li的下标
$li.each(function(ix){ //让所有的li按照顺序做一件事
$(this).delay(ix*30).fadeOut(30);
});
play();
});
$next.click(function(){
index++;
index%=length;
//0%12 0 ... 1%12 1 10%12 10 11%12 11 12%12 0 13%12 1
play();
});
$prev.click(function(){
index--;
index=index<0?length-1:index;
play();
});
function play(){ //函数封装方便多次使用
$li.eq(index).fadeIn(300).animate({
width:'90%',
height:'90%'
},300).siblings('li').css({
width:'288px',
height:'162px'
}).fadeOut(300); //指定下标的li显示出来
}
</script>
</html>


web前端学习群：575308719，分享源码、最新知识点、精品教程、欢迎初学者和在进阶中的小伙伴。
关注公众号→‘学习web前端’跟万人一起学前端！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： flex jquery插件动画布局源码

相关文章推荐

新的分享

章节导航