jquery层拖拽效果的实现方法
来源:互联网 发布:demo演示软件 编辑:程序博客网 时间:2024/05/19 10:39
<!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=gb2312" />
<title>jquery层拖拽效果-k686绿色软件 http://www.k686.com</title>
<script type="text/javascript" src="http://www.9qc.com/Public/js/jquery132.js"></script>
</head>
<body>
<h1><a href="http://www.k686.com/" title="k686绿色软件">k686绿色软件</a></h1>
<style type="text/css">
.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
</style>
<!--模块拖拽-->
<div class="drag">这个层是可以拖动滴 ^_^ <br />
<a href="http://www.k686.com/" title="k686绿色软件">k686绿色软件</a></div>
<div class="drag">这个层是可以拖动滴 ^_^ <br />
<a href="http://www.k686.com/" title="k686绿色软件">k686绿色软件</a></div>
<div class="drag">这个层是可以拖动滴 ^_^ <br />
<a href="http://www.k686.com/" title="k686绿色软件">k686绿色软件</a></div>
<div class="drag">这个层是可以拖动滴 ^_^ <br />
<a href="http://www.k686.com/" title="k686绿色软件">k686绿色软件</a></div>
<div class="drag">这个层是可以拖动滴 ^_^ <br />
<a href="http://www.k686.com/" title="k686绿色软件">k686绿色软件</a></div>
<script type="text/javascript">
// 层拖拽
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var obj="";
$(".drag").click(function(){
//alert("click");//点击(松开后触发)
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e.pageY-parseInt($(".drag").css("top"));
obj=$(this);
obj.fadeTo(20, 0.5);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
obj.css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
obj.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</body>
</html>
- jquery层拖拽效果的实现方法
- JQuery实现文字滚动效果-最简单的方法
- 用Jquery方法实现的简单下滑菜单效果
- JQuery实现超链接鼠标提示效果的方法
- jQuery实现的进度条效果
- 针对于ie8的拖拽效果的jQuery实现的方法
- 利用jquery的attr方法一行代码实现的简单的图片切换效果
- JQuery的bind方法效果叠加
- Jquery hover方法的效果延时处理
- 实现悬浮效果的方法
- 用 jQuery 实现页面滚动(Scroll)效果的完美方法
- 淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现
- jQuery实现的显示 隐藏效果
- Jquery中幻灯片效果的简单实现
- 基于jQuery实现的焦点轮换效果
- jquery实现股票的各种效果
- JQuery实现漂亮的滑动门效果
- jQuery实现很炫很酷的弹出层效果
- 判断字符串是否UTF8编码
- 分析stl function objects模块
- C函数调用
- 异常
- 各类数据库,查询指定函数数据,查前几行
- jquery层拖拽效果的实现方法
- WebKit 分析–for android
- 鼠标放td边线上可以调整宽度
- 学习笔记(7):C程序设计(第四版)谭浩强著_第十章~第十一章
- 无名管道和有名管道
- 在dll中寻找Visual Studio中的图标
- 市委常委,市政府党组副书记和市委副书记有什么区别
- jQuery UI 应用不同Theme的办法
- 用union验证大小端字节序