jquery实现窗口浮动可拖动
HTML代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> DO </title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 引用css --> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- 引用js --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> </head> <body class='box box-3'> <dl> <dd>代理人联系信息<b id="small_button" class="up"></b></dd> <ul> <li><span>姓 名：</span><i>张三</i></li> <li><span>手机号：</span><i>13245678936</i></li> <li><span>邮 箱：</span><i>xu@itrus.com.cn</i></li> <li><span>办公电话：</span><i>010-2555123</i></li> </ul> </dl> <script type="text/javascript" src="js/drag.js"></script> <script> $(function(){ $('.box-3 dl').each(function(){ $(this).dragging({ move : 'both', randomPosition : false }); }); }); </script> </body> </html>
CSS样式代码
*{padding:0;margin:0;}
div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{border:0;}
img,input{border:none;vertical-align:middle;}
body{font-family:'Microsoft YaHei',"微软雅黑", YaHei,Arial,Helvetica,sans-serif;font-size:14px;background:#fff;color:#444;}
body{overflow:scroll;}
ul,ol{list-style-type:none;}
th,td,input{font-size:14px;}
h3{font-size:14px;}
button{border:none;cursor:pointer;font-size:14px;background-color:transparent;}
select{border-width:1px;_zoom:1;border-style:solid;padding-top:2px;font-size:12px;}
input, button {font-family: "微软雅黑";outline: 0;border: 0; color:#666;}
.clear{clear:both;font-size:1px;height:0;visibility:hidden;line-height:0;}
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
a{text-decoration:none;}
a:link,a:visited{text-decoration:none;color:#444;}
a:hover,a:active{text-decoration:underline;color:#3db1fa;}
.box{width:100%; overflow:hidden;}
.box-3 dl{ display:table; position:absolute; bottom:5px; right:5px; width:300px; background:#fff;box-shadow: 0 0 7px rgba(0,0,0,.3); border-radius:3px; }
.box-3 dl dd{height: 40px;line-height: 40px; color:#fff; font-size: 16px;position: relative;padding-left: 10px; background:#06b5ff; border-radius:3px 3px 0 0;}
.box-3 dl dd b{ display: block; height:40px; width:40px; position:absolute; top:0; right:0; cursor:pointer;}
.box-3 dl dd b.up{ background:url(../images/up.png) center center no-repeat;}
.box-3 dl dd b.down{ background:url(../images/down.png) center center no-repeat;}
.box-3 dl ul{padding:0 20px; height:165px;}
.box-3 dl ul li{ height:40px; line-height:40px; border-top: 1px dashed #EDEDED;}
.box-3 dl ul li span{ display:inline-block; width:70px; text-align:right;}
.box-3 dl ul li i{ font-style:normal; margin-left:10px;}
js代码
$.fn.extend({ //---元素拖动插件 dragging:function(data){ var $this = $(this); var xPage; var yPage; var X;// var Y;// var xRand = 0;// var yRand = 0;// var father = $this.parent(); var defaults = { move : 'both', randomPosition : true , hander:1 } var opt = $.extend({},defaults,data); var movePosition = opt.move; var random = opt.randomPosition; var hander = opt.hander; if(hander == 1){ hander = $this; }else{ hander = $this.find(opt.hander); } //---初始化 $this.css({"position":"absolute"}); hander.css({"cursor":"move"}); var faWidth =$(window).width(); var faHeight = $(window).height(); var thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right')); var thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom')); var mDown = false;// var positionX; var positionY; var moveX ; var moveY ; if(random){ $thisRandom(); } function $thisRandom(){ //随机函数 $this.each(function(index){ var randY = parseInt(Math.random()*(faHeight-thisHeight));/// var randX = parseInt(Math.random()*(faWidth-thisWidth));/// if(movePosition.toLowerCase() == 'x'){ $(this).css({ left:randX }); }else if(movePosition.toLowerCase() == 'y'){ $(this).css({ top:randY }); }else if(movePosition.toLowerCase() == 'both'){ $(this).css({ top:randY, left:randX }); } }); } hander.mousedown(function(e){ father.children().css({"zIndex":"0"}); $this.css({"zIndex":"1"}); mDown = true; X = e.pageX; Y = e.pageY; positionX = $this.position().left; positionY = $this.position().top; return false; }); $(document).mouseup(function(e){ mDown = false; }); $(document).mousemove(function(e){ xPage = e.pageX;//-- moveX = positionX+xPage-X; yPage = e.pageY;//-- moveY = positionY+yPage-Y; function thisXMove(){ //x轴移动 if(mDown == true){ $this.css({"left":moveX}); }else{ return; } if(moveX < 0){ $this.css({"left":"0"}); } if(moveX > (faWidth-thisWidth)){ $this.css({"left":faWidth-thisWidth}); } return moveX; } function thisYMove(){ //y轴移动 if(mDown == true){ $this.css({"top":moveY}); }else{ return; } if(moveY < 0){ $this.css({"top":"0"}); } if(moveY > (faHeight-thisHeight)){ $this.css({"top":faHeight-thisHeight}); } return moveY; } function thisAllMove(){ //全部移动 if(mDown == true){ $this.css({"left":moveX,"top":moveY}); }else{ return; } if(moveX < 0){ $this.css({"left":"0"}); } if(moveX > (faWidth-thisWidth)){ $this.css({"left":faWidth-thisWidth}); } if(moveY < 0){ $this.css({"top":"0"}); } if(moveY > (faHeight-thisHeight)){ $this.css({"top":faHeight-thisHeight}); } } if(movePosition.toLowerCase() == "x"){ thisXMove(); }else if(movePosition.toLowerCase() == "y"){ thisYMove(); }else if(movePosition.toLowerCase() == 'both'){ thisAllMove(); } }); $("#small_button").click( function () { var w=$(window).width()-$(".box-3 dl").width(); var h=$(window).height()-$(".box-3 dl dd").height(); var h1=$(window).height()-205; if ( $(this).hasClass("up") ){ $(this).removeClass("up").addClass("down"); $(".box-3 dl").find("ul").hide(); $(".box-3 dl").animate({ left:w+"px", top:h+"px" },200); }else{ $(this).removeClass("down").addClass("up"); $(".box-3 dl").find("ul").show(); $(".box-3 dl").animate({ left:w+"px", top:h1+"px" },200); } }); } });
浙公网安备 33010602011771号