jquerydiv拖动效果示例代码
代码 示例 效果 拖动 jquerydiv
2023-06-13 09:15:13 时间
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>拖动DIV</title>
<styletype="text/css">
.show{
background:#7cd2f8;
width:100px;
height:100px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}
</style>
<scripttype="text/javascript"src="../Script/jquery-1.7.2.js"></script>
<scripttype="text/javascript"><!--
$(document).ready(function()
{
$(".show").mousedown(function(e)//e鼠标事件
{
$(this).css("cursor","move");//改变鼠标指针的形状
varoffset=$(this).offset();//DIV在页面的位置
varx=e.pageX-offset.left;//获得鼠标指针离DIV元素左边界的距离
vary=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>
<divclass="show">
jquery实现DIV层拖动
</div>
</body>
</html>
相关文章
- 微信这个隐藏代码神了,能让你微信逼格升一级,装x必备,99%的人都不知道
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 完整代码示例 )
- 【Groovy】使用 Groovy 语言开发服务器 Server 和客户端 Client 套接字程序 ( 服务器客户端完整代码示例 | 运行服务器端与客户端效果及过程分析 )
- java11新特性以及代码示例
- 破解Oracle程序的有效武器Oracle代码网站(oracle代码网站)
- perl后门,正向和反向!实例代码
- PHP读取MySQL数据代码
- js限制输入框可输入字节数代码
- perl数组的多数字下标示例代码
- 通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
- jquery特效幻灯片效果示例代码
- js实现inputtype="file"文件上传示例代码
- jquery实现上下滚动效果示例代码
- Android下通过httpClient发送GET和POST请求的实例代码
- jQuery动画效果-slideUpslideDown上下滑动示例代码
- jquery实现metro效果示例代码
- Spring实现文件上传(示例代码)
- 输入3个字符串,将它们按照字母由大到小排序(示例代码)
- JAVA实现KMP算法理论和示例代码
- C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)
- Server.HTMLEncode让代码在页面里显示为源代码
- 利用jQuary实现文字浮动提示效果示例代码
- jqueryAjax实现加载数据前动画效果的示例代码
- JqueryEasyUI中弹出确认对话框以及加载效果示例代码
- js确认删除对话框效果的示例代码
- QQ空间顶部折页撕开效果示例代码
- jQuery切换网页皮肤并保存到Cookie示例代码
- jquery制作select列表双向选择示例代码