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

Posted 2021-04-08 学习web前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery结合flex能够碰撞出什么样的火花呢？相关的知识，希望对你有一定的参考价值。

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

如果有正在学习前端javascript的伙伴，不知道怎么学习，或者该学些什么才能找到工作的可以一起来我们的微信前端群589651705,每晚都会分享一些企业级的知识和面试技巧。

图片展示画廊源码：

<!doctype html>

<title>web前端0基础实战</title>

*{ /*通配符选择器*/

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>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

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 ,

}

2.onmousemove

document 防止鼠标从ele上脱落

end={

}

比较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

[方法属性事件]

-->

文档源码已上传群文件，有需要的效果版可以加群获取

点击“阅读原文”也可加入群，点赞分享是种美德哦

以上是关于jQuery结合flex能够碰撞出什么样的火花呢？的主要内容，如果未能解决你的问题，请参考以下文章

当 RocketMQ 遇上 Serverless，会碰撞出怎样的火花？

分布式存储和区块链结合能碰撞出怎样的火花?

知识图谱深度学习AutoML，推荐系统与新技术结合将碰撞出怎样的火花？

对话腾讯天琴赵伟峰：当音乐与科技结合，会碰撞出怎样的火花？