jQuery实现仿Google首页拖动效果的方法
更新时间：2015年05月04日 15:33:54 投稿：shichen2014
这篇文章主要介绍了jQuery实现仿Google首页拖动效果的方法,涉及jQuery操作鼠标事件及div层的相关技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jQuery实现仿Google首页拖动效果的方法。分享给大家供大家参考。具体如下：
这里用jQuery.js库写了一个仿Google首页拖动的特效代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>用JQUERY实现的仿Google首页拖动特效</title>
<style type="text/css">
#div_width{
width:98%;
margin:0 auto;
}
*{
margin:0px;
padding:0px;
}
#div_left,#div_right,#div_center{
float:left;
width:28%;
height:900px;
margin:0 3px;
}
#div_center{
width:38%;
}
.can_move{
border:1px solid blue;
width:100%;
margin:5px 0;
min-height:150px;
}
.center_width{
height:200px;
}
p{
height:30px;
color:#fff;
line-height:30px;
background:#000;
cursor:move;
}
#xuxian{ /*虚线框*/
border:1px dashed #000;
margin:5px 0;
}
</style>
<script src="js/jquery.js"></script>
<script>
//<![CDATA[
window.onload=function(){
var mouse_down=false; //鼠标时候按下
var x_old=null; //按下鼠标时鼠标的坐标
var y_old=null;
var div_move=null; //正在移动的div
var div_move_width=null; //正在移动的div的宽
var div_move_height=null; //正在移动的div的高
var xuxian="<div id='xuxian'></div>"; //虚线框
document.oncontextmenu=new Function('event.returnValue=false;');
//禁止右键
document.onselectstart=new Function('event.returnValue=false;');
//禁止选中
//当鼠标按下的时候
$("p").mousedown(function(e){
mouse_down=true; //鼠标按下
div_move=$(this).parent(); //指定当前div为正在移动的div
div_move_width=div_move.width();
div_move_height=div_move.height();
x_old=e.pageX-$(this).offset().left; //获取鼠标坐标
y_old=e.pageY-$(this).offset().top;
//把当前div的position改成absolute
div_move.css({
position:'absolute',
zIndex:'10',
width:div_move_width,
height:div_move_height,
top:div_move.offset().top,
left:div_move.offset().left
});
//将虚线框添加到正在移动的div之前的位置
div_move.before(xuxian);
$("#xuxian").css({
width:'100%',
height:div_move_height
});
});
//移动鼠标
$(document).mousemove(function(e){
if(!mouse_down) return false;
var _x=e.pageX;
var _y=e.pageY;
var div_right_div=$("#div_right>div").not(div_move).not("#xuxian");
div_move.css({ //改变正在移动div的top和left
top:_y-y_old,
left:_x-x_old
});
/*注意,因为鼠标当前始终在正在移动的div上面,
所以,鼠标移动不会触发其他元素的mouseenter,mouseleave,mouseover
和mouseout事件,要想达到同样的效果,
只能根据鼠标的坐标来判断鼠标是否进入其他元素*/
var left_left=$("#div_left").offset().left;
//确定左边div_left容器的位置
var left_width=$("#div_left").width();
var right_left=$("#div_right").offset().left;
//确定右边div_right容器的位置
var right_width=$("#div_right").width();
var center_left=$("#div_center").offset().left;
//确定中间div_center容器的位置
var center_width=$("#div_center").width();
//判断鼠标坐标是否进入左边div_left容器
if(_x>left_left&&_x<(left_left+left_width)){
/*选定左边div_left容器下的最后一个可移动div,
不包含当前正在移动的div元素和虚线框*/
var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last");
if(div_left_last.length>=1){
//判断时候左边div_left容器下时候有可移动div元素
if(_y>(div_left_last.offset().top+div_left_last.height())){
//判断鼠标是否在左边div_left容器最后一个元素的下边
$("#xuxian").remove(); //如果是,移除之前添加的虚线框
div_left_last.after(xuxian);
//把虚线框添加为左边div_left容器的最后一个子元素
$("#xuxian").css({ //设定虚线框的高和宽
width:'100%',
height:div_move_height
});
}else{
//如果鼠标不在左边div_left容器最后一个元素的下边,
//那么,循环判定鼠标是否进入左边div_left容器下的可移动div元素里面
var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");
for(var i=0;i<div_left_div.length;i++){
if(_y>div_left_div.eq(i).offset().top&&(_y<div_left_div.eq(i).offset().top+div_left_div.eq(i).height())){
$("#xuxian").remove();
//如果是,删除之前添加的虚线框
div_left_div.eq(i).before(xuxian);
//把虚线框添加到当前鼠标进入的div元素的前面
$("#xuxian").css({ //设定虚线框的高和宽
width:'100%',
height:div_move_height
});
break; //退出循环
}
}
}
}else{//如果左边div_left容器下面没有任何可移动div元素
var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");
if(div_left_div.length==0){
$("#xuxian").remove(); //移除之前添加的虚线框
$("#div_left").append(xuxian);
//把虚线框添加为左边div_left容器的子元素
$("#xuxian").css({
width:'100%',
height:div_move_height
});
}
}
}else if(_x>center_left&&_x<(center_left+center_width)){
//判断鼠标是否进入中间div_center容器
/*选定中间div_center容器下的最后一个可移动div,
不包含当前正在移动的div元素和虚线框*/
var div_center_last=$("#div_center>div").not(div_move).not("#xuxian").filter(":last");
if(div_center_last.length>=1){
//判断中间div_center容器的下面时候有可移动div子元素
if(_y>(div_center_last.offset().top+div_center_last.height())){
//判断鼠标是否在中间div_center容器的最后一个可移动div子元素的下边
$("#xuxian").remove();
//如果是,删除之前添加的虚线框
div_center_last.after(xuxian);
//把虚线框添加为中间div_center容器的最后一个div子元素
$("#xuxian").css({ //设定虚线框的宽和高
width:'100%',
height:div_move_height
});
}else{
//如果鼠标不在中间div_center容器最后一个可移动div子元素的下边,
//则循环判断鼠标进入的是哪一个iv子元素
var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");
for(var i=0;i<div_center_div.length;i++){
if(_y>div_center_div.eq(i).offset().top&&(_y<div_center_div.eq(i).offset().top+div_center_div.eq(i).height())){
$("#xuxian").remove();
//找到鼠标进入的div子元素,删除之前添加的虚线框
div_center_div.eq(i).before(xuxian);
//把虚线框添加到当前鼠标进入的div子元素的前面
$("#xuxian").css({
//设定虚线框的宽度和高度
width:'100%',
height:div_move_height
});
break; //退出循环
}
}
}
}else{
//如果中间div_center容器的中间没有可移动的div子元素
var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");
if(div_center_div.length==0){
$("#xuxian").remove();
//删除之前添加的虚线框
$("#div_center").append(xuxian);
//把虚线框添加为中间div_center的最后一个div元素
$("#xuxian").css({
width:'100%',
height:div_move_height
});
}
}
}else if(_x>right_left&&_x<(right_left+right_width)){
//判断鼠标是否进入右边div_right容器
/*选定右边div_right容器下的最后一个可移动div,
不包含当前正在移动的div元素和虚线框*/
var div_right_last=$("#div_right>div").not(div_move).not("#xuxian").filter(":last");
if(div_right_last.length>=1){
//判断右边div_right容器下边是否有可移动的div子元素
if(_y>(div_right_last.offset().top+div_right_last.height())){
//判断鼠标时候在右边div_right容器最后一个可移动div元素的下边
$("#xuxian").remove();
//如果是,删除之前添加的虚线框
div_right_last.after(xuxian);
//添加虚线框为右边div_right容器的最后一个元素
$("#xuxian").css({
//设定虚线框的宽和高
width:'100%',
height:div_move_height
});
}else{
//如果鼠标不在右边div_right容器最后一个可移动div元素的下边,
//则循环判断鼠标进入到右边div_right容器下哪个可移动div元素里面
for(var i=0;i<div_right_div.length;i++){
if(_y>div_right_div.eq(i).offset().top&&(_y<div_right_div.eq(i).offset().top+div_right_div.eq(i).height())){
$("#xuxian").remove();
//找到鼠标进入的div元素,删除之前添加的虚线框
div_right_div.eq(i).before(xuxian);
//把虚线框添加到鼠标进入的div元素的前面
$("#xuxian").css({
//设定宽和高
width:'100%',
height:div_move_height
});
break;
//退出循环
}
}
}
}else{
//如果右边div_right元素的下边没有可移动的div子元素
if(div_right_div.length==0){
$("#xuxian").remove();
//删除之前添加的虚线框
$("#div_right").append(xuxian);
//把虚线框添加为右边div_right容器的子元素
$("#xuxian").css({
//设定虚线框的宽和高
width:'100%',
height:div_move_height
});
}
}
}
}).mouseup(function(){
mouse_down=false; //鼠标松开
$("#xuxian").before(div_move);
//将当前正在移动的div元素添加到虚线框的前面
div_move.css({
//更改正在移动div元素的position和宽
position:'static',
width:'100%'
});
$("#xuxian").remove();
//删除虚线框
return false;
});
}
//]]>
</script>
</head>
<body>
<div id="div_width">
<div id="div_left">
<div class="can_move">
<p>音乐</p>
</div>
<div class="can_move">
<p>活动</p>
</div>
</div>
<div id="div_center">
<div class="can_move center_width">
<p>科技</p>
</div>
</div>
<div id="div_right">
<div class="can_move">
<p>新闻</p>
</div>
<div class="can_move">
<p>元素</p>
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jQuery实现向下滑出的平滑下拉菜单效果的方法,涉及jquery鼠标事件及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jQuery+AJAX实现网页无刷新上传的相关资料，十分详细,需要的朋友可以参考下2015-02-02
Jquery ，大家都熟悉的一个框架，我对Jquery正在学习中，对其影响最深的当属 它的选择器之强,ajax与服务器之间的交谈2009-10-10
这篇文章主要介绍了jquery实现可旋转可拖拽的文字效果代码,涉及jquery响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jQuery实现的鼠标经过时变宽的效果,实例演示了jQuery的Kwicks插件实现针对鼠标事件的响应与页面元素样式动态变换的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了jQuery 表单事件与遍历详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
最近再做价值中国微博，从用户体验的角度，将很多常用的window.alert或者window.confirm之类比较生硬死板冷不丁的提示改为弹出层的方式实现。2010-10-10
本文记录了在项目中发现在IE9中不会立即触发change事件，存在兼容问题的解决过程，非常的详尽，解决过程中也有新问题出现，最终都解决完毕，完美实现了兼容各大主流浏览器2014-12-12
这篇文章主要介绍了jQuery实现底部浮动窗口效果,涉及jQuery事件响应及页面元素动态变换的相关操作技巧,需要的朋友可以参考下2016-09-09
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
这篇文章主要介绍了jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
最新评论