標籤：animate ansi down UI rip osi center 動效 color
1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>拖動DIV</title> 7 8 <style type="text/css"> 9 .show{ 10 background:#7cd2f8; 11 width:100px; 12 height:100px; 13 text-align:center; 14 position:absolute; 15 z-index:1; 16 left:100px; 17 top:100px; 18 } 19 </style> 20 21 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/165/x9ajweu6/1.5_jquery.min.js"></script> 22 <script type="text/javascript"> 23 $(document).ready(function(){ 24 $(".show").mousedown(function(e){ //e滑鼠事件 25 $(this).css("cursor","move");//改變滑鼠指標的形狀 26 27 var offset = $(this).offset();//DIV在頁面的位置 28 var x = e.pageX - offset.left;//獲得滑鼠指標離DIV元素左邊界的距離 29 var y = e.pageY - offset.top;//獲得滑鼠指標離DIV元素上邊界的距離 30 $(document).bind("mousemove",function(ev){ //綁定滑鼠的移動事件，因為游標在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 31 $(".show").stop();//加上這個之後 32 33 var _x = ev.pageX - x;//獲得X軸方向移動的值 34 var _y = ev.pageY - y;//獲得Y軸方向移動的值 35 36 $(".show").animate({left:_x+"px",top:_y+"px"},10); 37 }); 38 }); 39 40 $(document).mouseup(function(){ 41 $(".show").css("cursor","default"); 42 $(this).unbind("mousemove"); 43 }); 44 }); 45 </script> 46 </head> 47 <body> 48 <div class="show"> 49 jquery實現DIV層拖動 50 </div> 51 </body> 52 </html>
jquery div拖動效果範例程式碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
