Welcome, Old Sport!

创建一个拟FLASH的页面跳转效果(附加一个panel效果)

by ilikecss ON 2010/10/09 6280

做了许多局部的 jQuery 效果,昨天在网上看到一个个人觉得很不错的页面跳转效果,网站上有脚本报错,于是我把代码和 jQuery 提取和整理出来,制作了一款漂亮的页面跳转效果,分享给大家使用。
目前该跳转效果不支持IE6.但不影响页面。

Step1. 创建HTML

panel 部分

<div id="panel">
    <div id="info_box">
        <div id="about_box">
            <h1>Contact</h1>
            <p><strong>Sunflowa Media</strong> <span class="blue">|</span> Chengdu road north 500 Shanghai <span class="blue">|</span> Ph 86 %u2013 21 %u2013 63515008 / PO Box 200003</p>
            <div id="close"><a class="btn-slide" href="#">Close</a></div>
        </div>
    </div>
</div>

menu 部分

<ul>
<li class="active"><a href="index.html">Home</a></li><li><a href="index2.html">About</a></li><li><a href="index3.html">Portfolio</a></li><li><a href="index4.html">Blog</a></li><li><a class="btn-slide" href="#">Contact</a></li>
</ul>

Step2. 创建CSS

body {
margin: 0;
padding: 0;
border: 0;
background-color: #262626;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
}
img {
margin: 0;
padding: 0;
border: 0;
}
.ClearBoth {
clear: both;
}
a:active, a:focus {
outline: none;
}
p {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 16px;
font-weight: normal;
color: #FFFFFF;
}
.blue {
font-weight: bold;
color: #009ee0;
}
.grey {
font-weight: bold;
color: #737373;
}
.white {
font-weight: bold;
color: #FFF;
}
#wrap {
width: 100%;
}
/******** HEADER ********/
.header-colRight {
width: 995px;
margin: 0 auto 0;
padding: 100px 0;
}
.header-colRight ul {
color: #FFFFFF;
font-size: 14px;
line-height: 16px;
font-weight: normal;
list-style-type: none;
margin: 0;
padding: 0;
}
.header-colRight li {
display: inline;
margin: 0;
padding: 0 0 0 25px;
}
.header-colRight li.active a {
color: #009ee0;
}
.header-colRight a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
.header-colRight a:hover {
color: #009ee0;
}
/******** PANEL ********/
#panel {
width: 100%;
background: #262626 url(../images/bck-panel.png) repeat;
display: none;
position: relative;
}
#info_box {
margin: 0 auto 0 auto;
padding: 15px 0;
}
#about_box {
width: 600px;
margin: 0 auto;
padding: 10px 10px 40px 15px;
color: #333333;
background-color: #FFFFFF;
position:relative;
overflow: hidden;
}
#about_box h1 {
background: none;
color: #009EE0;
display: block;
font-size: 18px;
font-weight: bold;
line-height: 21px;
margin: 0;
padding: 0 0 5px 0;
text-transform: none;
}
#about_box p {
color: #262626;
display: block;
font-size: 12px;
font-weight: normal;
line-height: 18px;
margin: 0;
padding: 0 0 5px 0;
}
#about_box a {
color: #262626;
text-decoration: none;
font-weight: bold;
}
#about_box a:hover {
color: #009ee0;
text-decoration:none !important;
border: none;
}
#close a {
position: absolute;
top: 75px;
left: 310px;
}
#close a:hover {
border: none;
}
/******** HTMLLOADER ********/
.QOverlay {
background-color: #000000;
z-index: 9999;
}
.QLoader {
background-color: #262626;
height: 1px;
}

Step3. 插入jQuery和脚本包

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryLoader.js"></script>

页面Demo和脚本都已打包,请下载使用

2条评论
  1. #1

    aron说道:

    thanks for your files! I like it…..

    • Thanks your reply, Your Website is very beautiful too. If you free, Welcome to my blog to comment anything.




TOP