MUI-header+沉浸式+下滑头部背景渐变

最新推荐文章于 2019-11-28 14:34:40 发布

佛佛ง

最新推荐文章于 2019-11-28 14:34:40 发布

阅读量2.3k

点赞数

分类专栏： MUI

本文链接：https://blog.csdn.net/LzzMandy/article/details/86073797

版权

MUI 专栏收录该内容

36 篇文章 6 订阅

订阅专栏

头部机构如下:

<header class="mui-bar mui-bar-transparent bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">
				<input type="search" name="" required="" placeholder="Search" >
			</h1>
			<a class="mui-action-back mui-icon mui-icon-phone mui-pull-right"></a>
</header>

1、header标签内添加mui-bar-transparent

2、bg用来控制下滑时，背景色渐变

完整代码

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/* 给图片设置高度 */
			#slider .mui-slider-group .mui-slider-item a img{
				height: 200px;
			}
			.last{
				height: 800px;
			}
			/* 改变图标的颜色 */
			.mui-bar a{
				color: #fff;
			}
			/* 输入框背景色 */
			.mui-title input{
				background: gray;
			}
			/* 向下滚动时，背景渐变 */
			.bg{
				background: rgba(220,20,60,0);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-transparent bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">
				<input type="search" name="" required="" placeholder="Search" >
			</h1>
			<a class="mui-action-back mui-icon mui-icon-phone mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider" >
			  <div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
				  <a href="#"><img src="images/shuijiao.jpg"></a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
				  <a href="#"><img src="images/cbd.jpg"></a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
				  <a href="#"><img src="images/logo.png"></a>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
				  <a href="#"><img src="images/muwu.jpg"></a>
				</div>
				<!-- 第四张 -->
				<div class="mui-slider-item">
				  <a href="#"><img src="images/shuijiao.jpg"></a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
				  <a href="#"><img src="images/cbd.jpg"></a>
				</div>
			  </div>
			  <div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			  </div>
			</div>
			<div class="last"></div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			mui.init();
			// 有滚动条的时候必须进行加载
		</script>
	</body>

</html>

佛佛ง

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
MUI-header+沉浸式+下滑头部背景渐变

头部机构如下:&lt;header class="mui-bar mui-bar-transparent bg"&gt; &lt;a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"&gt;&lt;/a&gt; &lt;h1 class="mui-title"&gt; &amp
复制链接

扫一扫