萬盛學電腦網 >> 腳本專題 >> javascript >> jquery div拖動效果示例代碼
jquery div拖動效果示例代碼
div拖動效果想必大家都有見到過吧，實現的方法也是有很多的，下面為大家將介紹使用jquery是如何實現的，感興趣的朋友不要錯過
代碼如下: <%@ 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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved