js+css实现报纸图片玻璃放大镜移动效果代码-html代码-BFW代码库

js+css实现报纸图片玻璃放大镜移动效果代码

代码语言：html

代码描述：js+css实现报纸图片玻璃放大镜移动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head><script src="//repo.bfw.wiki/bfwrepo/js/eruda.js"></script><script>eruda.init();</script>
  <meta charset="UTF-8">

  
  
<style>
html, body {
  height: 100%;
}

body {
  background-image: linear-gradient(45deg, grey 0% lightgray 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.viewer {
  width: 800px;
  height: 520px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.13);
}
.viewer .paper {
  width: 100%;
  height: 205%;
  background: url(//repo.bfw.wiki/bfwrepo/images/paper/paperold.png);
  background-size: 800px auto;
}
.viewer .glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 190px;
  border-radius: 32px;
  background: url(//repo.bfw.wiki/bfwrepo/images/paper/paperold.png);
  background-size: 1600px  auto;
  pointer-events: none;
  box-shadow: inset -20px 20px 40px rgba(255, 255, 255, 0.4), inset 20px -20px 40px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
}
.viewer .glass::before, .viewer .glass::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 32px;
}
.viewer .glass::before {
  box-shadow: -6px 4px 4px rgba(0, 0, 0, 0.23);
}
.viewer .glass::after {
  background-image: url(//repo.bfw.wiki/bfwrepo/images/paper/dirty-window-texture-11.png);
  background-size: cover;
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
</style>

  
  
</head>

<body translate="no">
  <div id="viewer" class="viewer">
	<div id="paper" class="paper"></div>
	<div id="glass" class="glass"></div>
</div>

  
      <script >
const normalize = (va, mi, ma) => (va - mi) / (ma - mi),
interpolate = (no, mi, ma) => mi + (ma - mi) * no,
map = (va, mi1, ma1, mi2, ma2) => interpolate(normalize(va, mi1, ma1), mi2, ma2),
viewer = document.getElementById("viewer"),
paper = document.getElementById("paper"),
glass = document.getElementById("glass"),
offset = 50, // dragging calculated with an edge to make it feel more comfortable
smoothFactor = .28, // x and y are not directly set, but with a tendency towards that target (tx, ty)
STATUS_IDLE = 1, // idle
STATUS_DRAG = 2, // dragging
STATUS_FADE = 3; // post dragging

let glassPos = { x: 0, y: 0, tx: 0, ty: 0 },
glassBackPos = { x: 0, y: 0, tx: 0, ty: 0 },
paperPos = { x: 0, y: 0, tx: 0, ty: 0 },
status = STATUS_IDLE;

const touchstart = e => {
  if (status === STATUS_DRAG) return;
  status = STATUS_DRAG;
  if (!glass.classList.contains("active&qu.........完整代码请登录后点击上方下载按钮下载查看