<!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>拖拽和放大缩小</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style type="text/css">*{margin:0; padding:0;} .container{ position:relative; width:100px; margin-left:300px;} .line{ width:100px; height:20px; background:#ccc; border:1px solid #000;} .haddle{ width:10px; height:30px; background:pink; position:absolute; top:15px; left:0px; cursor:pointer;} .box{ width:100px; height:100px; background:#FC9; margin-top:15px;}</style> </head> <body> <div class="container"> <p>0%</p> <div class="line"></div> <div class="haddle"></div> <div class="box"></div> </div> <script type="text/javascript">//拖拽: $(".haddle").mousedown(function(e){ var e=e||window.event; var x=e.clientX-$(".haddle").position().left; $(document).mousemove(function(e){ $(document).bind('selectstart',function(){ return false;}) var x1=e.clientX-x; var mleft=$(".line").position().left+$(".line").width()-$(".hiddle").width()-10; var haddlex=$(".haddle").position().left-$(".line").position().left; var num=(haddlex/($(".line").width()-10)*100).toFixed(0); var boxw=100*parseFloat(num)/100; var boxh=100*parseFloat(num)/100; $("p").html(num+'%'); $(".box").width(boxw+100).height(boxh+100); x1=x1<$(".line").position().left?0:x1; x1=x1>mleft?mleft:x1; $(".haddle").css({'left':x1}); }) $(document).mouseup(function(){ $(document).unbind('mousemove').unbind('mouseup').unbind('selectstart'); }) })</script> </body> </html> 注意事项:1.在要拖动的对象上注册mousedown事件;2.document上注册mouseout和mousemove事件;3.$(document).bind('selectstart',function(){ return false;})这个是为了防止在拖动的时候,文本被选中,出现蓝色的区域,影响拖动。