利用jquery写的无限弹出移动窗口，仿桌面窗口移动，原理很简单

最新推荐文章于 2024-09-06 20:41:15 发布

q453115521

最新推荐文章于 2024-09-06 20:41:15 发布

阅读量1.9k

点赞数

分类专栏：前台文章标签： jquery 无限弹出移动窗口可移动

本文链接：https://blog.csdn.net/q453115521/article/details/41361715

版权

前台专栏收录该内容

1 篇文章 0 订阅

订阅专栏

无限弹出移动窗口，仿桌面窗口移动，主要应用了下列属性：

event.pageX:鼠标的x坐标；event.pageY:鼠标的y坐标

$('div.moveBar').offset().left:class为moveBar的div相对于浏览器窗口的左坐标

$('div.moveBar').offset().top:class为moveBar的div相对于浏览器窗口的左坐标

$(window).height():浏览器可视区域高度；$(window).width():浏览器可视区域宽度

在，js代码里面（js代码只有30行，简单易懂）：

yidong(evt){}这个函数主要是控制窗口的移动，和创建的窗口再被电机鼠标时，被点击的窗口呈现在最上面。

通过jquery内的自带函数bind：$(".banner").bind("mousedown",yidong);将yidong这个功能函数绑定到class为banner的标签上，这样点击这个标签可以控制其父标签移动和呈现等功能

详细了解或者要下载压缩包源码可以进入http://www.unvco.com/forum.php?mod=viewthread&tid=2289

界面如下（为了减少代码量，这里没有美化）：

代码如下：

<!DOCTYPE html>    
<html lang="zh">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
<title>无限弹出移动窗口，仿桌面窗口移动</title>    
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>    
<script>    
var i=1;    
jQuery(document).ready(function () {    

$('.button').click(function () {    

var div_width;var div_height;    

if($('.shuzhi_x').val()==""){div_width=200;}else{div_width=$('.shuzhi_x').val();}    

if($('.shuzhi_y').val()==""){div_height=200;}else{div_height=$('.shuzhi_y').val();}    

$("body").append("<div class='moveBar' style='position: absolute; width: "+div_width+"px; height:"+div_height+"px; background:#999; border: solid 1px #000;'> <div class='banner' onselectstart='javascript:return false;'>第<span style='color:#F00'>"+i+"</span>个生成窗口</div> <div class='content'>宽度：<span style='color:#F00'>"+div_width+"</span><br>高度：<span style='color:#F00'>"+div_height+"</span></div></div>");    

$(".banner").bind("mousedown",yidong);//每次生成后都要绑定事件到class为banner的标签上    

i++;    

});    

});    


function yidong(evt){//控制class为banner的父元素可以移动    

var evt = evt || window.event;    

var isMove = true;    

var abs_x = evt.pageX - $(this).parent().offset().left;    

var abs_y = evt.pageY - $(this).parent().offset().top;    

var parent_div_class="."+$(this).parent().attr("class");    

var move_div=this;    

$(parent_div_class).mousedown(function () {    

$(parent_div_class).css("z-index","");    

$(this).css("z-index","100");    

});//控制层的重叠    

$(document).mousemove(function (evt) {    

//$(move_div).parent().children('.content').html("x坐标："+event.pageX+"+y坐标："+event.pageY+"<br>div左边距："+$(move_div).parent().offset().left+"+div上边距："+$(move_div).parent().offset().top+"<br>可视宽度："+$(window).width()+"+可视高度："+$(window).height());    

if (isMove) {    

var moveBar_x=evt.pageX - abs_x;//移动后的x坐标    

var moveBar_y=evt.pageY - abs_y;//移动后的y坐标    

if(moveBar_x<10){moveBar_x=10;}    

if(moveBar_y<10){moveBar_y=10;}    

if(moveBar_x>$(window).width()-$(move_div).parent().width()-10){moveBar_x=$(window).width()-$(move_div).parent().width()-10;}    

//不能移出屏幕    

if(moveBar_y>$(window).height()-$(move_div).parent().height()-10){moveBar_y=$(window).height()-$(move_div).parent().height()-10;}    

$(move_div).parent().css({'left':moveBar_x, 'top':moveBar_y});    

}    

}).mouseup(function (){    

isMove = false;    

});    

}    

</script>    

<style type="text/css">    

<!--    

body {margin-left: 0px;}    

.moveBar{position: absolute; width: 300px; height:300px; background:#999; border: solid 1px #000;}    

.banner{background: #52CCCC; cursor: move;}    

-->    

</style></head>    

<body>    

<input class="button" name="" type="button" value="添加移动框">宽度<input name="" type="text" class="shuzhi_x">高度<input name="" type="text" class="shuzhi_y">    

<div>event.pageX:鼠标的x坐标<br>    

event.pageY:鼠标的y坐标<br>    

$('div.moveBar').offset().left:class为moveBar的div相对于浏览器窗口的左坐标<br>    

$('div.moveBar').offset().top:class为moveBar的div相对于浏览器窗口的左坐标<br>    

$(window).height():浏览器可视区域高度<br>    

$(window).width():浏览器可视区域宽度<br>    

下载附件后，请自己下jquery-1.7.2.min.js文件。<br>附件内不带jquery-1.7.2.min.js文件。    
</div>    
</body>    
</html>