经典的带阴影的可拖动的浮动层

下面我就为你详细讲解如何制作“经典的带阴影的可拖动的浮动层”。

准备工作

首先，我们需要准备完成以下几项工作：

1. 编写 HTML 结构
2. 编写 CSS 样式

HTML 结构

首先，我们需要在 HTML 中创建一个 div 元素，用于作为浮动层的基础容器。在这个 div 上添加两个特殊的类名：.draggable（可拖动的）和 .shadow（带阴影的）。其中，.draggable类名表示这个浮动层是可拖动的，.shadow类名表示这个浮动层需要添加阴影效果。

示例如下：

<div class="draggable shadow">
  <!-- 待添加内容 -->
</div>

CSS 样式

接下来，我们需要添加以下 CSS 样式，来完成浮动层的效果：

基础样式

首先，我们需要为浮动层添加基础的样式，包括宽度、高度、位置、背景色等：

.draggable {
  width: 200px; /* 宽度 */
  height: 200px; /* 高度 */
  position: absolute; /* 位置 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 垂直、水平居中 */
  background-color: #fff; /* 背景色 */
  border-radius: 5px; /* 圆角 */
}

可拖动样式

接下来，我们需要为浮动层添加可拖动的样式，包括鼠标指针形状、z-index 值等：

.draggable {
  /* 基础样式 */
  cursor: move; /* 鼠标指针形状 */
  z-index: 1; /* z-index 值 */
}

阴影样式

接下来，我们需要为浮动层添加阴影的样式，包括阴影颜色、阴影模糊度、阴影扩散度等：

.shadow {
  /* 基础样式 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.2); /* 阴影 */
}

Javascript 事件

最后，我们需要添加 Javascript 代码，来实现浮动层的可拖动功能：

let isDragging = false; // 判断是否拖动
let mouseX, mouseY; // 鼠标位置（相对于浮动层左上角）
let targetX, targetY; // 浮动层位置（相对于页面左上角）

// 监听mousedown事件
document.querySelector('.draggable').addEventListener('mousedown', function(e) {
  isDragging = true; // 开始拖动
  targetX = e.target.offsetLeft;
  targetY = e.target.offsetTop;
  mouseX = e.pageX - targetX;
  mouseY = e.pageY - targetY;
});

// 监听mousemove事件
document.addEventListener('mousemove', function(e) {
  if (!isDragging) return false;

  let x = e.pageX - mouseX;
  let y = e.pageY - mouseY;

  document.querySelector('.draggable').style.left = x + 'px';
  document.querySelector('.draggable').style.top = y + 'px';
});

// 监听mouseup事件
document.addEventListener('mouseup', function() {
  isDragging = false; // 停止拖动
});

以上就是制作“经典的带阴影的可拖动的浮动层”的完整攻略，接下来我将为你提供两个示例。

示例1：百度搜索框

<div class="draggable shadow">
  <input type="text" placeholder="百度一下，你就知道">
</div>

.draggable {
  width: 300px;
  height: 40px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
}

.draggable input[type="text"] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 18px;
}

.shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.2);
}

/* 省略Javascript事件 */

示例2：图片浏览器

<div class="draggable shadow">
  <img src="./images/pic.png" alt="">
</div>

.draggable {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.draggable img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shadow {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 省略Javascript事件 */

希望以上对你有所帮助！