DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery div拖動效果示例代碼
jquery div拖動效果示例代碼
編輯:JavaScript綜合知識     

 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> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved