鼠标拖拽回放

  1. <html>
  2. <head>
  3. <title>拖拽回放</title>
  4. <meta charest="utf-8">
  5. <style>
  6. div{width: 80px;height: 80px;background: red;position: absolute;}
  7. </style>
  8. <script>
  9. window.onload=function(){
  10. var oInp=document.getElementsByTagName(‘input‘)[0];
  11. var oDiv=document.getElementsByTagName(‘div‘)[0];
  12. var Left=[];
  13. var Top=[];
  14. oDiv.onmousedown=function(ev){
  15. ev=ev || event;
  16. var ms_b=ev.clientX-oDiv.offsetLeft;
  17. var ms_t=ev.clientY-oDiv.offsetTop;
  18. document.onmousemove=function(ev){
  19. ev=ev || event;
  20. var currX=ev.clientX-ms_b;
  21. var currY=ev.clientY-ms_t;
  22. var Width=document.body.clientWidth || document.documentElement.cilentWidth;
  23. var Height=document.body.clientHeight || document.documentElement.cilentHeight;
  24. Left.push(currX);
  25. Top.push(currY);
  26. //console.log(Left.length);
  27. if(currX<0) {currX=0;}
  28. else if(currX>Width-oDiv.clientWidth){
  29. currX=Width-oDiv.clientWidth;
  30. }
  31. if(currY<0) {currY=0;}
  32. else if(currY>Height-oDiv.clientHeight){
  33. currY=Height-oDiv.clientHeight;
  34. }
  35. oDiv.style.left=currX +‘px‘;
  36. oDiv.style.top=currY +‘px‘;
  37. return false;
  38. }
  39. document.onmouseup=function(){
  40. document.onmousemove=document.onmouseup=null;
  41. }
  42. }
  43. var timer=null;
  44. oInp.onclick=function(){
  45. console.log(Top.length);
  46. var i=Left.length;
  47. timer=setInterval(function(){
  48. oDiv.style.left=Left[i] +‘px‘;
  49. oDiv.style.top=Top[i] + ‘px‘;
  50. i--;
  51. if(i==0) {
  52. Left=[];
  53. Top=[];
  54. clearInterval(timer);
  55. }
  56. },1)
  57. }
  58. }
  59. </script>
  60. </head>
  61. <body>
  62. <input type="button"value=‘回放‘>
  63. <div></div>
  64. </body>
  65. </html>
时间： 2024-08-05 17:47:40

鼠标拖拽回放的相关文章

JavaScript鼠标拖拽特效及相关问题总结

#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;background:green;position:absolute;left:300px;} <div id="div1">原来的 普通拖拽</div> <div id="div2">继承的 限制范围拖拽</div> wind

unity 鼠标拖拽物体实现任意角度自旋转

主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长度,长度越长旋转越快 在project setting--Input 可以设置 直接上代码,看了就明白了 1 using UnityEngine; 2 using System.Collections; 3 4 public class startRoate : MonoBehaviour 5 {

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

js实现鼠标拖拽div-------Day44

如果去问这样一个问题"你觉得鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘按钮那么多,如果手小了或者手法不规范了,太容易出问题了,也对操作的速度和有效性是大大的降低了,当然不可否认,会有那么一批人,操作起键盘来完全可以忽略鼠标的,但这些都应该是骨灰级别的了吧,起码我现在的层次还接触不到,只能向往. 然而,当面对这么一个问题时,我突然有点纠结,因为毕竟以前我也是那么想的,但是这次开发让我是大跌眼镜,键盘操作我在开发中,我只能判定其按键是否按键,然后根据不同按键进

鼠标拖拽移动Java界面组件

默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖拽移动窗口的目的呢?最开始,我简单的在mouseDragged方法里frame.setLocation(e.getX(), e.getY()),结果,frame拖拽的时候不停地闪烁,位置在屏幕上不断跳动.后来网上查资料,找到了答案. 这里给一个简单的示例,一看就明白: 1 package com.j

JS Event 鼠标拖拽事件

<!DOCTYPE html><html> <head>        <meta charset="UTF-8">        <title>JS Event鼠标拖拽事件</title>                <style>            #box{width:200px;height:200px;background:#000;position:absolute;}       

鼠标拖拽模块

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

jquery鼠标拖拽效果分享

//html代码部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/jquery-1.11.1.js"></script> </head> <style> body

鼠标拖拽多选功能

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"&