每天学一个jquery插件-侧边小卡片

Posted 2021-05-21 阿飞超努力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天学一个jquery插件-侧边小卡片相关的知识，希望对你有一定的参考价值。

每天学一个jquery插件-侧边小卡片

侧边小卡片

今天分享一个样式上的小用法

效果如下
在这里插入图片描述

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边小卡片</title>
		<style>
			.box{
				position: fixed;
				width: 100px;
				height: 30px;
				background-color: gray;
				top: 20px;
				right: calc(100% - 20px);
				transition: all 0.2s linear;
			}
			.box:hover{
				right: calc(100% - 100px);
			}
		</style>
	</head>
	<body>
		<div class='box'></div>
	</body>
</html>

思路解释

就是以前有些内容在目标效果的实现上可能走了弯路，就比如考margin或者transform来做动画，但是有些东西会有更简单的变化
就比如这个侧边的小标签，这是我看到的一种思路
具体用到是一个calc的计算属性
东西一开始挤在屏幕外，我们直接让它浮于可视外，就是一个right：100%的事
然后我们知道它的宽度是多少，所以我们需要它露出来20px，所以直接计算属性让它露出来20px
等到hover事件的时候我们再通过calc允许它展示多少出来，这样子这个玩意就是固定的展示。
当然这个效果用到的地方还很多，以后再说
水完，休息

以上是关于每天学一个jquery插件-侧边小卡片的主要内容，如果未能解决你的问题，请参考以下文章