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

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

qq_39345165 2017-12-08 20:51 169 查看


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

<!doctype html> <!--声明文档类型 为网页文件-->
<html> <!--网页结构主体 圈地-->
<head> <!--网页头部 设置网页基本信息 以及对外通信-->
<title>web前端0基础实战</title> <!--设置网页的标题-->
<meta charset='utf-8'> <!-- 设置编码格式 gb2312 gbk-->
<!--设置网页关键词 方便搜索引擎搜索 以及seo优化-->
<meta name='keywords' content='0.0'>
<!--设置网页描述 免费的广告位 方便seo以及搜索引擎搜索-->
<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>
<!--

1.改变元素为定位模式
1.获取所有的li元素
document.getElementByTagName
document.querySelectorAll
2.利用for循环遍历li

3.给li的style样式中的position设置为absolute

2.拖拽模块开发
1.onmmousedown
ele
阻止默认事件 return false
start={
x ,
y
}
2.onmousemove
document 防止鼠标从ele上脱落
end={
x,
y
}
比较start 和 end
设置style样式中的left和top
3.onmouseup
解绑onmousemove
return false

3.碰撞检测
4.筛选距离最近的li
5.动画的实现
6.事务结束

html布局
div+css 移动端布局 html语言
JavaScript 编程层面 以及数据通信 插件开发
html5+css 高级应用 各种框架

网页三要素

div标签 盒子模型 在网页上划分区域的标签
ul li 无序列表标签
id命名 唯一性 身份证号码
class命名 类名 一类标签 非唯一性
css样式修饰标签 设置宽度 高度 背景颜色 等等

margin:10px 50px 30px 50px; /*外边距 上 右 下 左顺时针设置*/
margin:10px auto 30px; /*上 左右 下*/
margin:50px auto;/*上下 左右*/

flex 弹性盒模型布局 css3

img 图片四要素
src 图片路径
width 图片实际尺寸宽度
height 图片实际尺寸高度
alt 图片描述

标签 样式

p段落标签
background设置背景

p标签的展示模式是什么 块级别元素

a span img

默认行高

ui => 前端 =>后台

psd 数据交流
ajax 数据交互技术

20%实现业务逻辑

全栈工程师
前端 后台 运维
业务逻辑 综合性能
设计模式
node.js
架构师
算法 数据结构
设计模式
性能和架构优化

80%防止用户做纯操作

布局
显性知识点

p段落标签
background设置背景

隐性知识点

标签搭配与使用规范

知识点如何结合实战练习

文档流 浮动与清除浮动 脱离文档流 怪异盒模型

兼容性处理 标签规范

网站布局模式以及

JavaScript
[方法 属性 事件]

-->

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