js实现盒子拖拽动画效果

本文实例为大家分享了js实现盒子拖拽动画的具体代码，供大家参考，具体内容如下

 
 
 
 
 * {
  margin: 0;
  padding: 0;
 }
 .wrap {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  border-right-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -100px;
  box-sizing: border-box;
 }
 .wrap .head {
  height: 40px;
  padding-left: 4px;
  padding-right: 4px;
  background-color: #ccc;
  box-sizing: border-box;
  line-height: 40px;
  user-select: none;
 }
 .head:hover {
  cursor: move;
 }
 .head span {
  float: left;
 }
 #close {
  float: right;
 }
 #close:hover {
  cursor: pointer;
 }
 


 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
tom
 
 
  试着拖拽我
  【关闭】
 
 
 

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。