http://www.luidea.com/weboperation/Htmlcss/20110202_137.html
做了许多局部的 jQuery 效果，昨天在网上看到一个个人觉得很不错的页面跳转效果,网站上有脚本报错，于是我把代码和 jQuery 提取和整理出来，制作了一款漂亮的页面跳转效果，分享给大家使用。
目前该跳转效果不支持IE6.但不影响页面。
Step1. 创建HTML
panel 部分
01 |
<div id="panel"> |
02 |
<div id="info_box"> |
03 |
<div id="about_box"> |
04 |
<h1>Contact</h1> |
05 |
<p><strong>Sunflowa Media</strong> |
06 |
<span class="blue">|</span> |
07 |
Chengdu road north 500 Shanghai |
08 |
<span class="blue">|</span> |
09 |
Ph 86 %u2013 21 %u2013 63515008 / PO Box 200003 |
10 |
</p> |
11 |
<div id="close"><a class="btn-slide" href="#">Close</a></div> |
12 |
</div> |
13 |
</div> |
14 |
</div> |
menu 部分
1 |
<ul> |
2 |
<li class="active"><a href="index.html">Home</a></li> |
3 |
<li><a href="index2.html">About</a></li> |
4 |
<li><a href="index3.html">Portfolio</a></li> |
5 |
<li><a href="index4.html">Blog</a></li> |
6 |
<li><a class="btn-slide" href="#">Contact</a></li> |
7 |
</ul> |
Step2. 创建CSS
001 |
body { |
002 |
margin: 0; |
003 |
padding: 0; |
004 |
border: 0; |
005 |
background-color: #262626; |
006 |
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; |
007 |
font-size: 12px; |
008 |
color: #fff; |
009 |
} |
010 |
img { |
011 |
margin: 0; |
012 |
padding: 0; |
013 |
border: 0; |
014 |
} |
015 |
.ClearBoth { |
016 |
clear: both; |
017 |
} |
018 |
a:active, a:focus { |
019 |
outline: none; |
020 |
} |
021 |
p { |
022 |
margin: 0; |
023 |
padding: 0; |
024 |
font-size: 12px; |
025 |
line-height: 16px; |
026 |
font-weight: normal; |
027 |
color: #FFFFFF; |
028 |
} |
029 |
.blue { |
030 |
font-weight: bold; |
031 |
color: #009ee0; |
032 |
} |
033 |
.grey { |
034 |
font-weight: bold; |
035 |
color: #737373; |
036 |
} |
037 |
.white { |
038 |
font-weight: bold; |
039 |
color: #FFF; |
040 |
} |
041 |
#wrap { |
042 |
width: 100%; |
043 |
} |
044 |
/******** HEADER ********/ |
045 |
.header-colRight { |
046 |
width: 995px; |
047 |
margin: 0 auto 0; |
048 |
padding: 100px 0; |
049 |
} |
050 |
.header-colRight ul { |
051 |
color: #FFFFFF; |
052 |
font-size: 14px; |
053 |
line-height: 16px; |
054 |
font-weight: normal; |
055 |
list-style-type: none; |
056 |
margin: 0; |
057 |
padding: 0; |
058 |
} |
059 |
.header-colRight li { |
060 |
display: inline; |
061 |
margin: 0; |
062 |
padding: 0 0 0 25px; |
063 |
} |
064 |
.header-colRight li.active a { |
065 |
color: #009ee0; |
066 |
} |
067 |
.header-colRight a { |
068 |
color: #FFFFFF; |
069 |
text-decoration: none; |
070 |
font-weight: bold; |
071 |
} |
072 |
.header-colRight a:hover { |
073 |
color: #009ee0; |
074 |
} |
075 |
/******** PANEL ********/ |
076 |
#panel { |
077 |
width: 100%; |
078 |
background: #262626 url(../images/bck-panel.png) repeat; |
079 |
display: none; |
080 |
position: relative; |
081 |
} |
082 |
#info_box { |
083 |
margin: 0 auto 0 auto; |
084 |
padding: 15px 0; |
085 |
} |
086 |
#about_box { |
087 |
width: 600px; |
088 |
margin: 0 auto; |
089 |
padding: 10px 10px 40px 15px; |
090 |
color: #333333; |
091 |
background-color: #FFFFFF; |
092 |
position:relative; |
093 |
overflow: hidden; |
094 |
} |
095 |
#about_box h1 { |
096 |
background: none; |
097 |
color: #009EE0; |
098 |
display: block; |
099 |
font-size: 18px; |
100 |
font-weight: bold; |
101 |
line-height: 21px; |
102 |
margin: 0; |
103 |
padding: 0 0 5px 0; |
104 |
text-transform: none; |
105 |
} |
106 |
#about_box p { |
107 |
color: #262626; |
108 |
display: block; |
109 |
font-size: 12px; |
110 |
font-weight: normal; |
111 |
line-height: 18px; |
112 |
margin: 0; |
113 |
padding: 0 0 5px 0; |
114 |
} |
115 |
#about_box a { |
116 |
color: #262626; |
117 |
text-decoration: none; |
118 |
font-weight: bold; |
119 |
} |
120 |
#about_box a:hover { |
121 |
color: #009ee0; |
122 |
text-decoration:none !important; |
123 |
border: none; |
124 |
} |
125 |
#close a { |
126 |
position: absolute; |
127 |
top: 75px; |
128 |
left: 310px; |
129 |
} |
130 |
#close a:hover { |
131 |
border: none; |
132 |
} |
133 |
/******** HTMLLOADER ********/ |
134 |
.QOverlay { |
135 |
background-color: #000000; |
136 |
z-index: 9999; |
137 |
} |
138 |
.QLoader { |
139 |
background-color: #262626; |
140 |
height: 1px; |
141 |
} |
142 |
143 |
<blockquote style="padding:20px 0;color:#666;"> |
144 |
<div>转载请注明来源：<a href="http://www.luidea.com" title="集思网" target="_blank">集思网</a></div> |
145 |
<div>本文链接地址：<a href="http://www.luidea.com/weboperation/Htmlcss/20110202_137.html" title="Jquery教程:仿FLASH的页面跳转效果" rel="bookmark">Jquery教程:仿FLASH的页面跳转效果</a></div> |
146 |
<div>订阅本站：<a href="http://feed.feedsky.com/nid8" title="集思网" target="_blank">http://www.luidea.com/rss.xml</a></div> |
147 |
148 |
</blockquote> |
