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> |