jquery仿Discuz右下角懸浮層提示_打開頁面右下角滑動顯示懸浮層代碼



117 467 156



特效描述:右下角懸浮層 打開頁面 滑動顯示懸浮層,

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/yanue.pop.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/yanue.pop.js"></script>

2. 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右下角pop彈窗 完美兼容ie6789 ff chrome</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
/* pop */
#pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position:fixed;right:10px;bottom:10px;}
#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
#popHead #popClose{position:absolute;right:10px;top:1px;}
#popHead a#popClose:hover{color:#f00;cursor:pointer;}
#popContent{padding:5px 10px;}
#popTitle a{line-height:24px;font-size:14px;font-family:'微軟雅黑';color:#333;font-weight:bold;text-decoration:none;}
#popTitle a:hover{color:#f60;}
#popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
#popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
#popMore a{color:#f60;}
#popMore a:hover{color:#f00;}
</style>
</head>
<body style="height:1200px;">
<script type="text/javascript" >
//記得加載jquery
//使用參數:1.標題,2.鏈接地址,3.內容簡介
window.onload=function(){
	var pop=new Pop("這里是標題,哈哈","http://www.dijiuzhanzhang.com/","請輸入你的內容簡介,這里是內容簡介.請輸入你的內容簡介,這里是內容簡介.請輸入你的內容簡介,這里是內容簡介");
}
</script>
<div id="pop" style="display:none;">
	<div id="popHead"> <a id="popClose" title="關閉">關閉</a>
		<h2>溫馨提示</h2>
	</div>
	<div id="popContent">
		<dl>
			<dt id="popTitle"><a href="http://www.dijiuzhanzhang.com/" target="_blank">這里是標題</a></dt>
			<dd id="popIntro">這里是內容簡介</dd>
		</dl>
		<p id="popMore"><a href="http://www.dijiuzhanzhang.com/" target="_blank">查看 ?</a></p>
	</div>
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 浮動菜單 浮動導航 滑動選項卡 滑動切換 文字提示框 提示文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子