<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>拖動彩色圖片</title><meta name="author" content="http://blog.csdn.net/mooncom"><script src="jquery-1.8.3.min.js"></script> </head><body> <div class="div1"></div> <style> .div1{ height: 200px; width: 200px; background-image:linear-gradient(30deg,red,orange,blue,green,pink,purple); position: absolute; border:1px solid black; } </style> <script> $(function(){ var ismove=false; var divleft=0; var divtop=0; $(".div1").mousemove(function(e){ if(ismove){ var left=(e.pageX-divleft)+'px'; var top=(e.pageY-divtop)+"px"; $(this).css({'left':left,'top':top}); } }); $(".div1").mousedown(function(e){ ismove=true; divleft=e.pageX-$(this).offset().left; divtop=e.pageY-$(this).offset().top; console.log(divleft+"======"+divtop); }); $(".div1").mouseup(function(){ ismove=false; }); }); </script></body></html>
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
