<div class="codetitle"> <span><a style="CURSOR: pointer" data="44123" class="copybut" id="copybut44123" onclick="doCopy('code44123')"><u>复制代</u></a></span> 代码如下:</div> <div class="codebody" id="code44123"> <br><%@ page language="java" contentType="text/ html; charset=utf-8" <BR>pageEncoding="utf-8"%> <BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>拖アニメーションDIV</title> <br><style type="text/css"> <br>.show{ <br>背景:#7cd2f8; <br>幅:100ピクセル; <br>高さ:100ピクセル; <br>text-align:center; <br>位置:絶対; <br>z-インデックス:1; <br>左:100ピクセル; <br>トップ:100ピクセル; <br>} <br><br></style> <br><script type="text/javascript" src="../Script/jquery-1.7.2.js"></script> <br><script type="text/javascript"><!-- <BR>$(document).ready(function() <BR>{ <BR>$(".show").mousedown( function(e)//e鼠标イベント <BR>{ <BR>$(this).css("cursor","move");//变鼠标指针の形状変更 <br><br>var offset = $( this).offset();//DIV 页面の位置 <BR>var x = e.pageX - offset.left;//ネズミ标指针离DIV元素左边界の距離 <BR>var y = e.pageY - offset.top;//マウスの移動イベントを決定するには、DIV 要素の外面にも光が存在するため、マウスの移動イベントを特定します。<BR>$(document).bind("mousemove",function(ev) DIV 元素のイベントではなく、結果として必要なドキュメントのイベント <BR>{ <BR>$(".show").stop();// これを上に追加 <br><br>var _x = ev.pageX - x;//获得X軸方向の移動の值 <BR>var _y = ev.pageY - y;//获得Y軸方向の移動の值 <br><br>$(".show") .animate({left:_x "px",top:_y "px"},10); <BR><br>}); function() <br>{ <br>$(".show").css("cursor","default"); <br>$(this).unbind("mousemove"); <BR>}) <BR><BR>// --></script> <br></head> <br> <br><div class="show"> <br>jquery实现DIV层拖動<br></div> <br></body> <br></html> <br><br> </div>