jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧，实现的方法也是有很多的，下面为大家将介绍使用jquery是如何实现的，感兴趣的朋友不要错过
pageEncoding="utf-8"%>
<!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-www.jbxue.com</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="../Script/jquery-1.7.2.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()
{ // www.jbxue.com
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})
})
// --></script>
</head>
<body>
<div class="show">
jquery实现DIV层拖动
</div>
</body>
</html>
jquery div拖动效果示例代码的更多相关文章
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- Jquery 文字上下滚动效果示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> ...
- jquery实现页面控件拖动效果js代码
;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...
- JQuery -- Dom操作， 示例代码
1.内部插入节点 * append(content) :向每个匹配的元素的内部的结尾处追加内容 * appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 * ...
- JS实现图片翻书效果示例代码
js 图片翻书效果. picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 一行代码轻松实现拖动效果[JQuery]
写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上 实现拖动效果. $(document ...
- 使用jquery实现简单的拖动效果，分享源码
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAERCAIAAADzAOSQAAALRklEQVR4nO3dW5LaaAKEUfa/NkfMGu
- 使用jQuery实现简单的拖动效果
转自:http://www.muzilei.com/archives/136 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事 ...
- HTML 通过js实现div的拖动效果
最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...
随机推荐
- HDU 3157 Crazy Circuits（有源汇上下界最小流）
HDU 3157 Crazy Circuits 题目链接 题意:一个电路板,上面有N个接线柱(标号1~N),还有两个电源接线柱 + -.给出一些线路,每一个线路有一个下限值求一个能够让全部部件正常工作 ...
- 标准I/O库之缓冲
标准I/O库提供缓冲的目的是尽可能减少使用read和write调用的次数.它也对每个I/O流自动地进行缓冲管理,从而避免了应用程序需要考虑这一点所带来的麻烦. 标准I/O提供了三种类型的缓冲: (1) ...
- 文件夹同步/备份软件推荐 (SyncToy/FreeFileSync/Compare Advance/GoodSync/Allway Sync/Compare Advance)
关于文件同步的文章,已经很多次出现在异次元上了,因为它们很多都能实实在在提高工作便利性.比方说有我们熟悉的云端同步软件 Dropbox.金山快盘,以及曾经还介绍过可本地使用的 Allway Sync ...
- HTTP 无法注册 URL http://+:12345/HelloWcfService/。进程不具有此命名空间的访问权限
运行的时候却发现出如下问题:HTTP 无法注册 URLhttp://+:12345/HelloWcfService/.进程不具有此命名空间的访问权限(有关详细信息,请参见http://go.micro ...
- js获取光标位置例子
<html><head><title>TEST</title><style>body,td { font-family: verdana, ...
- 比较js中创建对象的几种方式
1.工厂模式 function createObj(name, sex){ var obj = new Object(); obj.name = name; obj.sex = sex; obj.sa ...
- 对JavaScript对象数组按指定属性和排序方向进行排序
引子 在以数据为中心的信息系统中,以表格形式展示数据是在常见不过的方式了.对数据进行排序是必不可少的功能.排序可以分为按单个字段排序和按多个字段不同排序方向排序.单字段排序局限性较大,不能满足用户对数 ...
- html笔记 横向两列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JAVA_HttpClientUtils
package org.mobiletrain.utils; import java.io.BufferedInputStream; import java.io.BufferedOutputStre ...
- appscan 安全漏洞修复办法
appscan 安全漏洞修复办法http://www.automationqa.com/forum.php?mod=viewthread&tid=3661&fromuid=21