最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery实现的简单拖动层示例
时间:2017-04-26 编辑:简简单单 来源:一聚教程网
本文实例讲述了jQuery实现的简单拖动层。分享给大家供大家参考,具体如下:
运行效果图如下:
完整代码如下:
代码如下 | 复制代码 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
按下鼠标即可拖动
$(function(){ //alert('aaaaaaa'); varx; vary; vartop; varleft; varclix; varcliy; varpd; varfx; varfy; $("#a").mousedown(function(f){ pd=true; if(!f){ f=window.event; } fx=f.clientX; fy=f.clientY; top=$(this).offset().top; left=$(this).offset().left; }); $("#a").mousemove(function(e){ if(!e){ e=window.event; } clix=e.clientX; cliy=e.clientY; if(pd==true){ $(this).css({'top':top+(cliy-fy),'left':left+(clix-fx)}); } $("#b").text(e.clientX+' '+e.clientY); }); $("#a").mouseup(function(){ pd=false; }); }) |
-
下一个: js仿微博动态栏功能
相关文章
- jQuery实现简单弹窗遮罩效果 05-05
- 基于jQuery实现简单人工智能聊天室 03-27
- 基于jQuery实现咖啡订单管理简单应用 03-27
- jquery echarts简单例子 11-18
- jQuery中animate方法简单用法 05-11
- jQuery 克隆对象的简单示例 11-23