深入精通JavaScript 插件

折叠

定义折叠

折叠是指将内容隐藏起来，只显示一部分内容或标题。

在Bootstrap中，折叠功能常用于折叠面板、手风琴效果等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h2 class="mb-4">定义折叠</h2>
<p>
<a href="#collapse" class="btn btn-primary" data-toggle="collapse">&lt;a&gt;触发折叠</a>
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">&lt;button&gt;触发折叠</button>
</p>
<div class="collapsing" id="collapse">
<div class="card card-body">
这是&lt;a&gt;触发的折叠内容
</div>
</div>
<div class="collapsing" id="collapse1">
<div class="card card-body">
这是&lt;button&gt;触发的折叠内容
</div>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

控制多目标

使用数据属性或JavaScript API可以控制多个目标的折叠状态。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">一个触发器切换多个目标</h3>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切换下面两个目标</button>
</p>
<div class="collapse multi-collapse">
<div class="card card-body">折叠内容一</div>
</div>
<div class="collapse multi-collapse">
<div class="card card-body">折叠内容二</div>
</div>
<hr class="my-4">
<h3 class="mb-4">多个触发器切换一个目标</h3>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multi-collapse">触发器1</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multi-collapse">触发器2</button>
</p>
<div class="collapse" id="multi-collapse">
<div class="card card-body">
多个触发器触发的内容
</div>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

设计手风琴效果

手风琴效果是一种特定的折叠效果，只有一个面板可以展开，其它面板自动折叠。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h2 class="mb-4">手风琴示例</h2>
<h4>个人简历</h4>
<div id="Example">
<div class="card">
<div class="card-header">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">教育经历</button>
</div>
<div id="one" class="collapse show" data-parent="#Example">
<div class="card-body">
毕业于加利福尼亚大学，学习的专业为计算机科学与技术。
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#two">工作经验</button>
</div>
<div id="two" class="collapse show" data-parent="#Example">
<div class="card-body">
做过一年的软件开发
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#three">教育经历</button>
</div>
<div id="three" class="collapse show" data-parent="#Example">
<div class="card-body">
篮球，足球，街舞，表演
</div>
</div>
</div>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

调用折叠

使用JavaScript或数据属性（如data-bs-toggle=”collapse”）调用折叠效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">折叠事件</h3>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">折叠</button>
</div>
<div id="one" class="collapse">
<div class="card-body">
折叠的内容
</div>
</div>
</div>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.collapse').on('shown.bs.collapse',function () {
$('body').css('background','#36ee23');
$('[data-toggle="collapse"]').html('折叠内容显示完成')
});
$('.collapse').on('hidden.bs.collapse',function () {
$('body').css('background','#fdff62');
$('[data-toggle="collapse"]').html('折叠内容隐藏完成')
})
})
</script>
</body>
</html>

添加用户行为

可以使用事件监听器来添加自定义的用户行为，如点击展开/折叠。

工具提示

定义工具提示

工具提示是一种用户界面元素，用于显示附加信息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

&lt;/head&gt;
&lt;body class=&quot;container&quot;&gt;
	&lt;h2 class=&quot;mb-5&quot;&gt;定义工具提示&lt;/h2&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot;
		title=&quot;Tooltip on top&quot;&gt;
		Tooltip on top
	&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;right&quot;
		title=&quot;Tooltip on right&quot;&gt;
		Tooltip on right
	&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot;
		title=&quot;Tooltip on bottom&quot;&gt;
		Tooltip on bottom
	&lt;/button&gt;
	&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;left&quot;
		title=&quot;Tooltip on left&quot;&gt;
		Tooltip on left
	&lt;/button&gt;
	&lt;!--引入js文件--&gt;
	&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js&quot;&gt;&lt;/script&gt;
	&lt;!--Bootstrap核心JavaScript文件--&gt;
	&lt;script src=&quot;https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;
		$(function() &#123;
			// 使用data-toggle属性触发工具提示
			$(&#x27;[data-toggle=&quot;tooltip&quot;]&#x27;).tooltip();
		&#125;)
	&lt;/script&gt;
&lt;/body&gt;

</html>

工具提示方向

工具提示可以在不同的方向上显示，如顶部、底部、左侧或右侧。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h2 class="mb-5">工具提示方向</h2>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="left" data-trigger="click" title="工具提示">向左</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="right" data-trigger="click" title="工具提示">向右</button>
<div class="my-5">
<hr></div>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="top" data-trigger="click" title="工具提示">向上</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="bottom" data-trigger="click" title="工具提示">向下</button>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
// 使用data-toggle属性触发工具提示
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>

调用工具提示

使用data-bs-toggle=”tooltip”和data-bs-placement来调用工具提示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h2 class="mb-5">添加自定义HTML</h2>
<button type="button" class="btn btn-danger" data-html="true" data-toggle="tooltip" title="<em><b>工具提示</b></em><u>添加</u><b>HTML</b>">工具提示添加自定义的HTML</button>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
// 使用data-toggle属性触发工具提示
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>

添加用户行为

通过JavaScript API或事件来触发工具提示的显示或隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Container</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h2 class="mb-5">工具提示事件</h2>
<button type="button" class="btn btn-info ml-5" data-toggle="myTooltip" id="myTooltip">工具提示</button>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#myTooltip').tooltip({
title:'工具提示',
trigger:'click',
});
$('#myTooltip').on('show.bs.tooltip',function () {
alert('show.bs.tooltip');
$(this).removeClass('btn-info').addClass('btn-primary')
});
$('#myTooltip').on('inserted.bs.tooltip',function () {
alert('inserted.bs.tooltip');
$(this).removeClass('btn-primary').addClass('btn-danger')
});
$('#myTooltip').on('shown.bs.tooltip',function () {
alert('shown.bs.tooltip');
$(this).removeClass('btn-danger').addClass('btn-info')
});
$('#myTooltip').on('hide.bs.tooltip',function () {
alert('hide.bs.tooltip');
$(this).removeClass('btn-info').addClass('btn-success')
});
$('#myTooltip').on('hidden.bs.tooltip',function () {
alert('hidden.bs.tooltip');
$(this).removeClass('btn-success').addClass('btn-info')
});
})
</script>
</body>
</html>

弹窗

定义弹窗

弹窗是一种用于显示重要信息的模态窗口。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<span data-toggle="popover" title="弹窗标题" data-content="弹窗内容">
<button type="button" class="btn btn-primary">禁用按钮</button>
</span>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
})
</script>
</body>
</html>

弹窗方向

弹窗通常在屏幕中央显示，但可以根据需求调整其位置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-5">弹窗方向</h3>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="left" title="弹窗标题" data-content="弹窗内容">向左</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="right" title="弹窗标题" data-content="弹窗内容">向右</button>
<div class="my-5">
<hr></div>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="top" title="弹窗标题" data-content="弹窗内容">向上</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="bottom" title="弹窗标题" data-content="弹窗内容">向下</button>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
})
</script>
</body>
</html>

调用弹窗

使用data-bs-toggle=”modal”来调用弹窗，或使用JavaScript API进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-5">调用弹窗</h3>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover">弹窗</button>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover({
animation:true,
html:true,
offset:'200px',
title:'展翅飞翔的鹰',
content:'<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1492166545,3998677836&fm=26&gp=0.jpg" class="img-fluid">',
trigger:'click',
delay:{show:1000,hide:1000}
});
})
</script>
</body>
</html>

添加用户行为

可以通过JavaScript事件来控制弹窗的显示、隐藏和交互。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-5">弹窗事件</h3>
<button type="button" class="btn btn-info ml-5" data-toggle="popover" id="myPopover">弹窗</button>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#myPopover').popover({
title:'弹窗标题',
content:'弹窗内容',
trigger:'click',
});
$('#myPopover').on('show.bs.popover',function () {
$(this).removeClass('btn-info').addClass('btn-primary');
alert('show.bs.popover');
});
$('#myPopover').on('inserted.bs.popover',function () {
$(this).removeClass('btn-primary').addClass('btn-danger');
alert('inserted.bs.popover');
});
$('#myPopover').on('shown.bs.popover',function () {
$(this).removeClass('btn-danger').addClass('btn-info');
alert('shown.bs.popover');
});
$('#myPopover').on('hide.bs.popover',function () {
$(this).removeClass('btn-info').addClass('btn-success');
alert('hide.bs.popover');
});
$('#myPopover').on('hidden.bs.popover',function () {
$(this).removeClass('btn-success').addClass('btn-info');
alert('hidden.bs.popover');
});
})
</script>
</body>
</html>

轮播

定义轮播

轮播是一种可以自动切换内容的组件，常用于图片或内容的展示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">轮播效果</h3>
<div id="Carousel" class="carousel slide" data-ride="carousel">
<!– 标示图标–>
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!– 幻灯片–>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817812355&di=3a9244ab51fcabd4a4ee4ebf6ae5df83&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D3609981743%2C3469269943%26fm%3D214%26gp%3D0.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>图片一</h5>
<p>说明文字</p>
</div>
</div>
<div class="carousel-item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817810044&di=b8ba750c6befb9ad8fbee4a2aedc032e&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F81%2F71%2F01300000164151121808718718556.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>图片二</h5>
<p>说明文字</p>
</div>
</div>
<div class="carousel-item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817810043&di=6dbace02185a6f316a11b790e70fd5e9&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F48%2F85%2F01300000190639122695850379005.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>图片三</h5>
<p>说明文字</p>
</div>
</div>
</div>
<!– 按钮控制–>
<a href="#Carousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#Carousel" class="carousel-control-next" data-slide="prev">
<span class="carousel-control-next-icon"></span>
</a>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>
</html>

设计轮播风格

可以自定义轮播的样式和过渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">交叉淡入淡出效果</h3>
<div id="Carousel" class="carousel slide carousel-fade w-50" data-ride="carousel">
<!– 标示图标–>
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!– 幻灯片–>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="1000">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817812355&di=3a9244ab51fcabd4a4ee4ebf6ae5df83&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D3609981743%2C3469269943%26fm%3D214%26gp%3D0.jpg" class="d-block w-100" style="height: 600px" alt="">
<div class="carousel-caption">
<h5>图片一</h5>
<p class="text-danger">说明文字</p>
</div>
</div>
<div class="carousel-item" data-interval="1000">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817810044&di=b8ba750c6befb9ad8fbee4a2aedc032e&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F81%2F71%2F01300000164151121808718718556.jpg" class="d-block w-100" style="height: 600px" alt="">
<div class="carousel-caption">
<h5>图片二</h5>
<p class="text-danger">说明文字</p>
</div>
</div>
<div class="carousel-item" data-interval="1000">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817810043&di=6dbace02185a6f316a11b790e70fd5e9&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F48%2F85%2F01300000190639122695850379005.jpg" class="d-block w-100" style="height: 600px" alt="">
<div class="carousel-caption">
<h5>图片三</h5>
<p class="text-danger">说明文字</p>
</div>
</div>
</div>
<!– 按钮控制–>
<a href="#Carousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#Carousel" class="carousel-control-next" data-slide="prev">
<span class="carousel-control-next-icon"></span>
</a>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>
</html>

调用轮播

使用data-bs-ride=”carousel”来初始化轮播组件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">轮播事件</h3>
<div id="Carousel" class="carousel slide carousel-fade w-50" data-ride="carousel">
<!– 标示图标–>
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!– 幻灯片–>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="1000">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817812355&di=3a9244ab51fcabd4a4ee4ebf6ae5df83&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D3609981743%2C3469269943%26fm%3D214%26gp%3D0.jpg" class="d-block w-100" style="height: 600px" alt="">
<div class="carousel-caption">
<h5>图片一</h5>
<p>说明文字</p>
</div>
</div>
<div class="carousel-item" data-interval="1000">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817810044&di=b8ba750c6befb9ad8fbee4a2aedc032e&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F81%2F71%2F01300000164151121808718718556.jpg" class="d-block w-100" style="height: 600px" alt="">
<div class="carousel-caption">
<h5>图片二</h5>
<p>说明文字</p>
</div>
</div>
<div class="carousel-item" data-interval="1000">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592817810043&di=6dbace02185a6f316a11b790e70fd5e9&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F48%2F85%2F01300000190639122695850379005.jpg" class="d-block w-100" style="height: 600px" alt="">
<div class="carousel-caption">
<h5>图片三</h5>
<p>说明文字</p>
</div>
</div>
</div>
<!– 按钮控制–>
<a href="#Carousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#Carousel" class="carousel-control-next" data-slide="prev">
<span class="carousel-control-next-icon"></span>
</a>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.carousel').on('slide.bs.carousel',function (e) {
e.target.style.border='solid 10px #FF1493';
});
$('.carousel').on('slid.bs.carousel',function (e) {
e.target.style.border='solid 10px #9C9C9C';
})
})
</script>
</body>
</html>

滚动监听

定义滚动监听

滚动监听是一种用于在用户滚动页面时触发特定行为的功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.Scrollspy {
width: 500px;
height: 400px;
overflow: scroll;
}
</style>
</head>
<body class="container">
<nav id="navbar" class="navbar navbar-light bg-light">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#list1" class="nav-link">列表1</a>
</li>
<li class="nav-item">
<a href="#list2" class="nav-link">列表2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉菜单</a>
<div class="dropdown-menu">
<a href="#menu1" class="dropdown-item">菜单1</a>
<a href="#menu2" class="dropdown-item">菜单2</a>
<a href="#menu3" class="dropdown-item">菜单3</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar" data-offset="80" class="Scrollspy">
<h4 id="list1">列表1</h4>
<p><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1816366408,1729518576&fm=26&gp=0.jpg" alt="" class="img-fluid"></p>
<h4 id="list2">列表2</h4>
<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592841048969&di=6bda4d1b34aa657368850d661b49f948&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190508%2F17%2F1557307364-SJENtIuizm.jpg" alt="" class="img-fluid"></p>
<h4 id="menu1">菜单1</h4>
<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592841048969&di=ddcf6d9c187a8485f7b1c4d2d02bd2aa&imgtype=0&src=http%3A%2F%2Fimage.huahuibk.com%2Fuploads%2F20190130%2F19%2F1548848720-ETVQwCkWqG.jpg" alt="" class="img-fluid"></p>
<h4 id="menu2">菜单2</h4>
<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592841048969&di=fef15d53553ce8c72a7e4178ff970988&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180830%2F22%2F1535637788-yPpZcnIXbh.jpg" alt="" class="img-fluid"></p>
<h4 id="menu3">菜单3</h4>
<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592841048968&di=e3c3e328e1d2ff857dfc291e36b1794c&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190508%2F16%2F1557305155-IeLDpTwbPZ.jpg" alt="" class="img-fluid"></p>

</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('body').on('activate.bs.scrollspy',function (e) {
$('body').css('background','yellow')
})
})
</script>
</body>
</html>

调用滚动监听

使用window.onscroll事件或第三方库来监听滚动事件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.Scrollspy {
width: 500px;
height: 500px;
overflow: scroll;
}
</style>
</head>
<body class="container">
<h3 class="mb-4">列表组示例</h3>
<div class="row">
<div class="col-3">
<div id="list" class="list-group">
<a href="#list-item-1" class="list-group-item list-group-item-action">Item 1</a>
<a href="#list-item-2" class="list-group-item list-group-item-action">Item 2</a>
<a href="#list-item-3" class="list-group-item list-group-item-action">Item 3</a>
<a href="#list-item-4" class="list-group-item list-group-item-action">Item 4</a>
<a href="#list-item-5" class="list-group-item list-group-item-action">Item 5</a>
</div>
</div>
<div class="col-9">
<div data-spy="scroll" data-target="#list" data-offset="0" class="Scrollspy">
<h4 id="list-item-1">Item 1</h4>
<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592838590989&di=3b26fd142d85a57c35be1a1a195e8d6e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F579724e59c09f.jpg" alt="" class="img-fluid"></p>
<h4 id="list-item-2">Item 2</h4>
<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592838542645&di=0aaa7145cc7a0e193d446c5c421e2b2d&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1212%2F17%2Fc2%2F16677046_1355737208957.jpg" alt="" class="img-fluid"></p>
<h4 id="list-item-3">Item 3</h4>
<p><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3446717444,2037982531&fm=26&gp=0.jpg" alt="" class="img-fluid"></p>
<h4 id="list-item-4">Item 4</h4>
<p><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3513235684,2788458109&fm=26&gp=0.jpg" alt="" class="img-fluid"></p>
<h4 id="list-item-5">Item 5</h4>
<p><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=213101828,1173125753&fm=26&gp=0.jpg" alt="" class="img-fluid"></p>
</div>
</div>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>
</html>

实战实训1—设计折叠搜索框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../fontawesome-free-5.13.1-web/css/all.css">
<style>
i {
border: 1px solid black;
border-radius: 50%;
padding: 5px;
}

i:hover {
background: #00aa88;
color: white;
}
</style>
</head>
<body class="container">
<nav class="navbar navbar-expand-md navbar-light bg-light mt-3">
<a href="#" class="navbar-brand">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">联系我们</a>
</li>
</ul>
<div>
<a href="#"><i class="fa fa-shopping-cart mr-3"></i></a>
<a href="#" data-toggle="collapse" data-target="#collapseExample"><i class="fa fa-search"></i></a>
</div>

</div>
</nav>
<div class="d-flex justify-content-end mr-3 mt-1">
<div class="collapse" id="collapseExample">
<div class="form-group form-inline">
<input type="search" class="form-control mr-2"><a href="#" class="btn btn-primary">搜索</a>
</div>
</div>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>
</html>

实战实训2—仿小米内容展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>深入精通JavaScript插件</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
body{
min-width: 992px;
}
.carousel-indicators li{
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 15px;
}
.col-3:hover{
transform: translateY(-5px);
}
</style>
</head>
<body class="container">
<h4 class="mb-4">内容展示</h4>
<div class="row">
<div class="col-3">
<div id="Carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img11.360buyimg.com/n7/jfs/t1/143961/23/279/89997/5edf26d9E50f655c9/0182ab8049f3c884.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img14.360buyimg.com/n7/jfs/t1/107890/24/12556/188366/5e993588Ece609b77/e840b11255d10d71.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
</div>
<a href="#Carousel" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
<a href="#Carousel" class="carousel-control-next" data-slide="prev"><span class="carousel-control-next-icon"></span></a>
</div>
</div>
<div class="col-3">
<div id="Carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Carousel1" data-slide-to="0" class="active"></li>
<li data-target="#Carousel1" data-slide-to="1"></li>
<li data-target="#Carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img11.360buyimg.com/n7/jfs/t1/143961/23/279/89997/5edf26d9E50f655c9/0182ab8049f3c884.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img14.360buyimg.com/n7/jfs/t1/107890/24/12556/188366/5e993588Ece609b77/e840b11255d10d71.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
</div>
<a href="#Carousel1" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
<a href="#Carousel1" class="carousel-control-next" data-slide="prev"><span class="carousel-control-next-icon"></span></a>
</div>
</div>
<div class="col-3">
<div id="Carousel2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Carousel2" data-slide-to="0" class="active"></li>
<li data-target="#Carousel2" data-slide-to="1"></li>
<li data-target="#Carousel2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img11.360buyimg.com/n7/jfs/t1/143961/23/279/89997/5edf26d9E50f655c9/0182ab8049f3c884.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img14.360buyimg.com/n7/jfs/t1/107890/24/12556/188366/5e993588Ece609b77/e840b11255d10d71.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
</div>
<a href="#Carousel2" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
<a href="#Carousel2" class="carousel-control-next" data-slide="prev"><span class="carousel-control-next-icon"></span></a>
</div>
</div>
<div class="col-3">
<div id="Carousel3" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Carousel3" data-slide-to="0" class="active"></li>
<li data-target="#Carousel3" data-slide-to="1"></li>
<li data-target="#Carousel3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="//img12.360buyimg.com/n7/jfs/t1/130673/1/2572/166108/5eec1c9fE122ff56f/ee7678ab000ec2fa.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img11.360buyimg.com/n7/jfs/t1/143961/23/279/89997/5edf26d9E50f655c9/0182ab8049f3c884.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
<div class="carousel-item">
<img src="//img14.360buyimg.com/n7/jfs/t1/107890/24/12556/188366/5e993588Ece609b77/e840b11255d10d71.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="text-danger">女士服装</p>
</div>
</div>
</div>
<a href="#Carousel3" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
<a href="#Carousel3" class="carousel-control-next" data-slide="prev"><span class="carousel-control-next-icon"></span></a>
</div>
</div>
</div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>
</html>