Jquery实现鼠标移动div
来源:互联网 发布:淘宝怎么删除好评 编辑:程序博客网 时间:2024/05/01 15:27
<!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-Type" content="text/html; charset=utf-8" /> <title>拖动DIV</title> <style type="text/css"> .show{ background:#7cd2f8; width:100px; height:100px; text-align:center; position:absolute; z-index:1; left:100px; top:100px; } </style> <script type="text/javascript" src="../../jquery-3.1.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".show").mousedown(function(e){ //e鼠标事件 $(this).css("cursor","move");//改变鼠标指针的形状 var offset = $(this).offset();//DIV在页面的位置 var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 $(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 $(".show").stop();//加上这个之后 var _x = ev.pageX - x;//获得X轴方向移动的值 var _y = ev.pageY - y;//获得Y轴方向移动的值 $(".show").animate({left:_x+"px",top:_y+"px"},10); }); }); $(document).mouseup(function(){ $(".show").css("cursor","default"); $(this).unbind("mousemove"); }); }); </script> </head> <body> <div class="show"> jquery实现DIV层拖动 </div> </body> </html>
阅读全文
0 0
- Jquery实现鼠标移动div
- jquery div 跟随鼠标移动
- jquery鼠标随意移动div
- jQuery鼠标随意移动div
- js 实现 鼠标 移动 div
- jquery实现div上下移动
- jquery实现div上下移动
- JS实现div随着鼠标移动
- Js实现div跟着鼠标的移动
- JS实现鼠标拖动div移动
- css实现 : 鼠标移动上去显示div,移开隐藏div
- 鼠标移动到div上显示子div实现要点
- jquery 鼠标点击挪动div实现
- jQuery实现鼠标拖拽div
- Jquery实现鼠标拖动改变div高度
- jQuery实现鼠标拖拽div效果
- JQuery 实现鼠标移动的动态交替
- JQuery实现鼠标拖动元素移动位置
- php7.0.5
- 报错了
- 【java基础】03.泛型
- anaconda的正确安装
- Windows下IntelliJ IDEA配置git项目
- Jquery实现鼠标移动div
- 如何获取web项目的绝对路径
- 心得记录
- python使用全局变量(global)
- 12 个免费的 Deep Learning 在线学习网站
- 简单的3.3V电源备用电源:采用线性设计的ADI电源注---凯利讯半导体
- api网关
- Android 小测验
- OneGuard-For-Oracle功能介绍(Oracle安全和审计、TNS协议解析)