js实现鼠标拖曳效果


Posted in Javascript onDecember 30, 2020

js实现鼠标的拖曳效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

效果如下:

js实现鼠标拖曳效果

下面是代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>鼠标拖曳效果</title>
 <style>
 body{
  background:black;
 }
 #box{
  position:absolute;
  background: rgb(148, 143, 143);
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: white 2px solid;
 }
 .topTitle{
  cursor: move;
  border-bottom: white 2px solid;
  background: #cccccc;
  text-align: right;
  color: white;
  height: 20px;
  line-height: 20px;

 }
 .content >div{

  background: rgb(148, 143, 143);
  height: 50px;
  line-height: 50px;
  color: white;
  text-align: left;
 }
 </style>
</head>
<body>
 
 <div id="box">
 <div class="topTitle"><a href="#" >点击回放拖动轨迹</a></div>
 <div class="content">
  <div>Drag:</div> 
  <div>offsetTop:</div> 
  <div>offsetLeft</div> 
 </div>
 </div>
</body>
<script>

 var oBox=document.getElementById("box");
 var oTopTitle=document.getElementsByClassName("topTitle")[0];
 var aDiv= document.querySelectorAll(".content >div");
 var offWidth=document.documentElement.clientWidth;
 var clHight=document.documentElement.clientHeight;
 var i,t;
 var state="false";

 var oText=document.querySelector(".topTitle a");
 oTopTitle.onmousedown=function(even){
 var OffsetE=even||window.event;
var flag=true;

//设立边界:
 
 document.onmousemove=function(even){
 state="true";
  var ClientE=even||window.event;
  l=ClientE.clientX-OffsetE.offsetX;
  t=ClientE.clientY-OffsetE.offsetY;
  recorde(l,t,flag);
 if(l<0){
  l=0;
 }
 if(t<0){
  t=0;
 }
 if(l>offWidth-oBox.offsetWidth){
  l=offWidth-oBox.offsetWidth;
 }
 if(t>clHight-oBox.offsetHeight){
  t=clHight-oBox.offsetHeight;
 }
  
  oBox.style.left=l+"px";
  oBox.style.top=t+"px";

 }
 
 document.onmouseup=function(){
  console.log(1);
  state="false";
 
  document.onmousemove=null;
  document.onmouseup=null;
 }
 OffsetE.preventDefault();
 flag=false;
 
 }
 oText.onclick=function(){
 var reback=recorde(l,t);

 var index=reback.strX.length;
 setInterval(function(){
 if(index<0){
  clearInterval();
  return;
 }
 oBox.style.left=reback.strX[index--]
 +"px";
 oBox.style.top=reback.strY[index--]+"px";
 },30);

 
  
 
 
strX=[];
 strY=[];
 
}
var strX=[];
var strY=[]; 
function recorde(offsetTop,offsetLeft,flag){

 
 
 var text1=aDiv[1].innerText;
 aDiv[0].innerHTML="Drag:"+"<span style='color:yellow'>"+state+"</span>";
 aDiv[1].innerHTML="offsetTop:"+"<span style='color:yellow'>"+offsetTop+"</span>";
 aDiv[2].innerHTML="offsetLeft:"+"<span style='color:yellow'>"+offsetLeft+"</span>";
 
 
 strX.push(offsetTop) ;
 strY.push(offsetLeft);
 // console.log(strX);
 // console.log(strY);
 return {
 strX,
 strY
 
 }

 }

</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
js实现微信聊天界面
Aug 09 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
React中使用Vditor自定义图片详解
Dec 25 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
微信小程序实现简单购物车功能
Dec 30 #Javascript
微信小程序实现购物车小功能
Dec 30 #Javascript
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
You might like
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
业务代表的岗位职责
2013/11/16 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
有关打架的检讨书
2014/01/25 职场文书
五年级科学教学反思
2014/02/05 职场文书
物流管理专业推荐信
2014/09/06 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
网络营销计划
2015/01/17 职场文书
培训通知书模板
2015/04/17 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Go 中的空白标识符下划线
2022/03/25 Golang