您的位置：首页 > Web前端 > JQuery

jquery div拖动效果示例代码

2013-12-09 11:13 771 查看
代码如下:

<%@ page language="java" contentType="text/html; charset=utf-8"

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</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()

{

$(".show").css("cursor","default");

$(this).unbind("mousemove");

})

})

// --></script>

</head>

<body>

<div class="show">

jquery实现DIV层拖动

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航