jQuery可拖动右下角浮动窗口特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery可拖动右下角浮动窗口特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=utf-8" />
<title>jQuery可拖动右下角浮动窗口特效</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>姓&nbsp;&nbsp;&nbsp;名：</span><i>程序员设计师联盟淘宝店</i></li>
			<li><span>手机号：</span><i>1234567890</i></li>
			<li><span>邮&nbsp;&nbsp;&nbsp;箱：</span><i>sc@chinaz.com</i></li>
			<li><span>办公电话：</span><i>0000-0000000</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>

JS代码(drag.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);
}
}
);
}
}
);

CSS代码(style.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;}

附件:下载该文件资源,减少时间成本(增值服务)