jquery可拖动右下角浮动窗口代码



108 429 144



特效描述:可拖动悬浮窗口 右下角浮动窗口,jquery可随鼠标随意移动的弹出框,内容可收缩,移到任意位置,点击可收缩到浏览器窗口的右下角

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>

3. 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> DO </title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<!-- 引用css -->
	<!-- 引用js -->
 </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>13245678936</i></li>
                <li><span>邮&nbsp;&nbsp;&nbsp;箱:</span><i>xu@itrus.com.cn</i></li>
                <li><span>办公电话:</span><i>010-2555123</i></li>
            </ul>            
        </dl>
	<script>
		$(function(){
			$('.box-3 dl').each(function(){
				$(this).dragging({
					move : 'both',
					randomPosition : false
				});
			});
		});
	</script>    
 </body>
 </html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 收缩展开 展开收缩 收缩 展开 浮动提示框 图片拖动 图片拖拽 浮动菜单 浮动导航 收缩菜单 收缩导航

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到