jQuery 右下角滑動彈出可關閉重現層完整代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 右下角滑動彈出可關閉重現層完整代碼

編輯：JQuery特效代碼

效果圖：

完整代碼如下：

<!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 name="keywords" content="www.jb51.net"/> 
<style type="text/css"> 
*{ margin:0px; padding:0px;} 
#jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} 
#jihuaslide a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue;} 
#jihuaslide h2{ font-size:24px; text-align:center;font-family:"微軟雅黑";} 
#reshow{position:fixed;right:2px;bottom:2px;font-size:12px; display:none;background-color:White; cursor:pointer;border:1px solid #000;} 
</style> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"></head>

<body> 
 
歡迎 
hi 
計劃 
博客園 
jihua 
jb51.net 
cnblogs 
歡迎光臨 
A 
baidu.com 
B 
hello 
Jihua 
你快回來 
 
關閉 
右下角滑動彈出可重現層
www.jb51.net 
<h2> jquery教程</h2> 
 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:關於jQuery UI 使用心得及技巧
下一頁:Jquery圖形報表插件 jqplot簡介及參數詳解

JQuery特效代碼

lyhucSelect基於Jquery的Select數據聯動插件: 數據源：代碼如下: var areaInfo = new Array(); areaInfo[0
jQuery學習筆記之jQuery+CSS3的浏覽器兼容性: CSS3充分吸收多年了web發展的需求，吸收了很多新穎的特性。例如border-radiuscss3
jquery 插件學習（三）: 例如： . 代碼如下: $(this).test().hide().height(); 要實現類似

DIV CSS 佈局教程網

相關文章