jquery可拖動右下角浮動窗口代碼



112 447 150



特效描述:可拖動懸浮窗口 右下角浮動窗口,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>[email protected]</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

加群請備注:從官網了解到

老夫子电子