web前端：仿苹果mac底部停靠栏，底层原理解析玩转

web前端：仿苹果mac底部停靠栏，底层原理解析玩转不同效果

.MAC底部栏-缩放图标效果，image-style计算原理

javascript

2.less包装

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow: hidden;
    body {
        height: 100%;
        #wrap {
            height: 600px;
            width: 800px;
            position: absolute;
            background: skyblue;
            border: 10px solid steelblue;
            border-radius: 8%;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            box-shadow: 2px 5px 5px #000000;
            h1 {
                position: absolute;
                text-align: center;
                color: tomato;
                top: 30%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
            }
            h2 {
                position: absolute;
                float: right;
                margin-right: 10%;
                color: white;
                top: 40%;
                right: -10%;
                transform: translate3d(-50%, -50%, 0);
            }
            #wrap-imgs {
                position: absolute;
                bottom: 10%;
                left: 0;
                //margin居中失效，采用align，图片为inline-block，可以使用
                width: 100%;
                text-align: center;
                //如果取消默认空隙间隔
                //font-size: 0;
                
                img {
                    width: 80px;
                    margin: 0 10px;
                }
            }
        }
    }
}

3.css生成

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  overflow: hidden;
}
html body {
  height: 100%;
}
html body #wrap {
  height: 600px;
  width: 800px;
  position: absolute;
  background: skyblue;
  border: 10px solid steelblue;
  border-radius: 8%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 2px 5px 5px #000000;
}
html body #wrap h1 {
  position: absolute;
  text-align: center;
  color: tomato;
  top: 30%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
html body #wrap h2 {
  position: absolute;
  float: right;
  margin-right: 10%;
  color: white;
  top: 40%;
  right: -10%;
  transform: translate3d(-50%, -50%, 0);
}
html body #wrap #wrap-imgs {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  text-align: center;
}
html body #wrap #wrap-imgs img {
  width: 80px;
  margin: 0 10px;
}

3.js鼠标事件监听

$(function() {
	var wrapNode=document.querySelector("#wrap");
	//获取所有图片
	var wrapImgsNode=document.querySelectorAll("#wrap > #wrap-imgs > img");
	//半径:半径越大，img缩放越小
	var imgRadius=400;

	//鼠标移动，大于半径则发生scale
	document.onmousemove=function(e) {
		e=e || event;
		for(var i=0; i < wrapImgsNode.length; i++) {
			/* 每张图片对应的X/Y(img到视口的距离+img宽度的1/2-)
			 * x轴坐标width=元素left+元素width/2-鼠标落点x
				|- imgNode.getBoundingClientRect().left + imgNode.offsetWidth/2 + e.clientX
			   y轴坐标width=元素top+元素height/2-鼠标落点y
				|- imgNode.getBoundingClientRect().top + imgNode.offsetHeight/2 + e.clientY
				斜边=半径=开方
			 */
			var imgX=wrapImgsNode[i].getBoundingClientRect().left + wrapImgsNode[i].offsetWidth / 2 - e.clientX;
			var imgY=wrapImgsNode[i].getBoundingClientRect().top + wrapImgsNode[i].offsetHeight / 2 - e.clientY;
			var imgbevelLine=Math.sqrt(imgX * imgX + imgY * imgY);

			//半径=128，imgbevelLine=直径128，img覆盖范围半径64，bevelLine越小，img越大
			if(imgbevelLine >=imgRadius) {
				//大于130，img的大小不变
				imgbevelLine=imgRadius;
			}
			//imgbevelLine斜边+比例越大，width越小
			wrapImgsNode[i].style.width=160 - imgbevelLine * 0.2 + "px";
		}
	}
})

4.html页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title>MAC底部缩放停靠栏</title>
		<link rel="stylesheet" href="css/2-mac-bottom-nav.css" />
	</head>

	<body>
		<div id="wrap">
			<div>
				<h1>MAC底部缩放停靠栏</h1>
				<h2>PS：一刀coder</h2>
			</div>
			<div id="wrap-imgs">
				<img src="img/logo300-2.png" />
				<img src="img/logo300-2.png" />
				<img src="img/logo300-2.png" />
				<img src="img/logo300-2.png" />
				<img src="img/logo300-2.png" />
			</div>

		</div>
	</body>
	<script type="text/javascript" src="../../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="js/2-mac-bottom-nav.js"></script>

</html>
123456789101112131415161718192021222324252627282930

5.效果图

javascript

^_^收藏、转发、关注我，每天更新各种web流行技术栈源码剖析！

、源码描述说明

本套源码主要用于他人与自己联系，以我的爱车挡路为例，对方扫码联系请我挪车，对方手机扫描二维码，将会打开一个详情页面，显示车牌号码与联系方法，可以点击发送短信，将会弹出短信发送界面，手机号码自动填充，短信内容自动填充，点击发送按钮即可。或者点击拨打电话，将会弹出电话拨打界面，手机号码自动填充，直接拨打电话即可。

本套源码可以在线上或线下使用，支持安卓手机和苹果手机，线上二维码就是电子二维码，可以在互联网上使用，若是打算在线下使用，则可应用于任何场景，二维码打印出来以后，可以放在任何醒目位置，比如车窗上，家门上，墙壁上，桌子上，等等，对方扫码就能与你联系。

本套源码是单页面的，页面内容可以随意编辑，一般依据不同的使用场景，替换为不同的文本内容，若是懂点HTML知识，可以在页面里添加图片，以及嵌入二维码，甚至添加音频和视频等。本套源码是非常实用的，每个人都应该拥有，但是有一个前提条件，就是要上传到主机里，这样他人才能扫码访问。

本套源码是绿色版本，无需任何数据库，没有管理后台，没有任何安装过程，上传以后即可使用，可以搭建一个独立站点，或者上传到你的已有站点，成为一个子栏目或子频道。

二、源码截图演示

音在HTML中可以以不同的方式播放.

问题以及解决方法

在 HTML 中播放音频并不容易！

您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

在这W3CSchool 为您总结了问题和解决方法。

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件可以使用 <object> 标签或者 <embed> 标签添加在页面上.

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用 <embed> 元素

下面的代码片段能够显示嵌入网页中的 MP3 文件：

实例

问题:

<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 <object> 元素

下面的代码片段能够显示嵌入网页中的 MP3 文件：

实例

问题:

不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

The <audio> element works in all modern browsers.

以下我们将使用 <audio> 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:

实例

Your browser does not support this audio format.

</audio>

问题:

<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。

最好的 HTML 解决方法

下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

实例

</audio>

问题:

您必须把音频转换为不同的格式。
<embed> 元素无法回退来显示错误消息。

雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或博客中就可以轻松地将您的HTML页面制作成专业的播放列表：

实例

<a href="horse.mp3">Play Sound</a>

如果你要使用它，您需要把这段 JavaScript 插入网页底部：

然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：

...

雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。

请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

实例

<a href="horse.mp3">Play the sound</a>

内联的声音说明

当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

HTML 多媒体标签

New : HTML5 新标签

标签	描述
<embed>	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>	定义内嵌对象。
<param>	定义对象的参数。
<audio>New	定义了声音内容
<video>New	定义一个视频或者影片
<source>New	定义了media元素的多媒体资源(<video> 和 <audio>)
<track>New	规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：仿抖音3d立体图片音乐盒用vue、css、js的ht
下一篇：Javascript中的数组遍历方法以及兼容性处理，

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端：仿苹果mac底部停靠栏，底层原理解析玩转

.MAC底部栏-缩放图标效果，image-style计算原理

2.less包装

3.css生成

3.js鼠标事件监听

4.html页面

5.效果图

您的项目需求