js实现可拖动大小dvd老式电视效果代码-html代码-BFW代码库

js实现可拖动大小dvd老式电视效果代码

代码语言：html

所属分类：拖放

代码描述：js实现可拖动大小dvd老式电视效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  background-color: #222;
}

.tv-style {
  width: 400px;
  height: 300px;
  min-width: 115px;
  min-height: 100px;
  max-width: 95%;
  max-height: 95%;
  margin: 0 auto;
  padding: 16px 16px 50px 16px;
  margin-top: 32px;
  resize: both;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  border-bottom-left-radius: 50% 2%;
  border-bottom-right-radius: 50% 2%;
  border-top: 3px solid #888;
  background: linear-gradient(90deg, #29282b 0%, #29282b 22%, #29282b 31%, #29282b 39%, #29282b 60%, #29282b 80%, #29282b 100%);
  box-shadow: 0 0 100px 0 rgba(200, 235, 255, 0.4);
}
.tv-style:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 3%;
  left: 36%;
  height: 0.5%;
  width: 28%;
  background: #ddd;
  border-radius: 50%;
  box-shadow: 0 0 3px 0 white;
}

#tv {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #777;
  border-radius: 1px;
  overflow: hidden;
}

#logo {
  position: absolute;
  font-weight: bold;
  text-align: center;
  user-select: none;
  font-style: italic;
  max-width: 95%;
  max-height: 95%;
  min-width: 0;
  min-height: 0;
}

.controls {
  display: flex;
  margin-top: 8px;
}
.controls .btn {
  color: white;
  padding: 4px;
  font-size: 12px;
  margin-inline-end: 4px;
  background: rgba(255, 255, 255, 0.3);
  width: 16px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  opacity: 0.6;
}
.controls .btn:hover {
  opacity: 0.9;
}
.controls .btn:active {
  box-shadow: 0 0px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(2px);
}

#ctrl {
  font-size: 20px;
  line-height: 8px;
}
</style>



</head>

<body translate="no" >
  <div class="tv-style">
  <div id="tv">
    <div id="logo" style="left:0px;top:0px;background-color:#FF0000;color:#FFFFFF;width:70px;height:40px;line-height:40px">DVD</div>
  </div>
  <div class="controls">
    <div class="btn" id="speed-down">◀</div>
    <div class="btn" id="speed-up">▶</div>
    <div class="btn" id="bg-light">▲</div>
    <div class="btn" id="bg-dark">▼</div>
    <div class="btn off" id="ctrl">○</div>
  </div>
</div>

      <script>
console.clear();
const tvElm = document.querySelector('#tv');
const logoElm = document.querySelector('#logo');
const speedupBtn = document.querySelector('#speed-up');
const speeddownBtn = document.querySelector('#speed-down');
const bglightBtn = document.querySelector('#bg-light');
const bgdarkBtn = document.querySelector('#bg-dark');
const ctrlBtn = document.querySelector('#ctrl');

let speed = 100; // .........完整代码请登录后点击上方下载按钮下载查看