网站渐变效果代码

最新推荐文章于 2022-11-07 19:58:21 发布

piperzero

最新推荐文章于 2022-11-07 19:58:21 发布

阅读量1.2k

点赞数

分类专栏：网站建设文章标签： class timer filter function div 浏览器

本文链接：https://blog.csdn.net/freejs/article/details/3336837

版权

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

<html>
<head>
<title>网页渐变效果</title>
<style type="text/css">
/* 控制导航栏的外观 */
.nav {
float:left;
width:200px;
border: solid 1px #111111;
}
/* 控制导航栏内按钮的外观 */
.nav a{
line-height:18px;
font-size: 12px;
color: #000000;
text-decoration: none;
display: block;
height:30px;
text-align: center;
border-bottom: #111111 solid 1px;
}
/* 控制导航栏内按钮文字的位置 */
.nav span {
position: relative;/* 定位是相对位置 */
top: 8px;/* 上边距为8像素 */
}
/* 控制导航栏内未选中按钮的外观 */
.nav .unselect{
font-weight: normal;
background-color: #FFFFFF;
}
/* 控制导航栏内选中按钮的外观 */
.nav .select{
font-weight: bold;
background-color: #CCCCCC;
}
/* 控制已显示页面（暨内容区）的外观 */
#content .select {
display: block;
width: 500px;
height: 500px;
background: #CCCCCC;
border: #111111 solid 1px;
filter:alpha(opacity=0);
}
/* 控制未显示页面（暨内容区）的外观 */
#content .unselect {
display: none;
filter:alpha(opacity=0);
opacity: 0.00;
}
</style>
<script type="text/javascript">
var activeTabId = 'tab1'; // 当前被选中的按钮的 ID
var activePageId = 'page1'; // 当前正显示的页面（暨内容区）的 ID
var clickPageId; // 将要显示的页面
var opacity = 100; // 将要隐藏和将要显示的页面的透明度
var timer; // 存放生成后的定时器
var isIE = navigator.userAgent.indexOf("MSIE") >= 0; // 判断是否为IE浏览器，因IE浏览器与Firefox等浏览器设置透明度的方法不相同。代码中藉由此变量判断以便运行不同的代码。
var isSwitch = false; // 是否正在切换页面
// 将页面渐变显示出来的函数
function showPage() {
// 获取要显示的页面
var page = document.getElementById(clickPageId);
// 对象不存在则函数立即返回
if(!(page)) return false;
// 将变量中透明度设置到页面上
if(isIE) {
page.filters.alpha.opacity = opacity;
} else {
page.style.opacity = opacity / 100;
}
// 如果要显示页面的透明度还没有到 100 则继续递增透明度
if(opacity < 100) {
opacity = opacity + 10;
// 要显示页面的透明度已经达到 100，暨已渐变显示完毕
} else {
clearInterval(timer); // 清除定时器
// 重置变量
isSwitch = false;
activePageId = clickPageId;
}
// 如果类名不等于 select 则将其设置为 select
if(page.className != 'select') page.className = 'select';
}
// 将页面渐变隐藏的函数
function hidePage() {
var page = document.getElementById(activePageId);
if(!(page)) return false;
if(isIE) {
page.filters.alpha.opacity = opacity;
} else {
page.style.opacity = opacity / 100;
}
if(opacity > 10) {
opacity = opacity - 10; // 这里是递减透明度，和显示页面时的递增相反。
} else {
clearInterval(timer);
page.className = 'unselect';
opacity = 0;
// 启动渐变显示页面的定时器
timer = setInterval(showPage, 50);
}
}
// 开始进行页面的渐变切换，此函数初始化一些变量
function switchPage(tabId, pageId) {
// 当前正在切换页面，不能再次切换其他页面，因此函数立即返回
if(isSwitch) {
return false;
} else {
isSwitch = true;
}
// 要显示的页面已经被显示则函数立即返回
if(tabId == activeTabId) return false;
// 获取要显示和要隐藏的页面对应的按钮
var tab1 = document.getElementById(tabId);
var tab2 = document.getElementById(activeTabId);
// 要显示的页面对应的按钮不存在则函数立即返回
if(!(tab1)) return false;
// 将要显示的页面对应的按钮的CSS类名设置成 select，使其与其他按钮的外观不同。同时将其他按钮的外观恢复到普通状态。
tab1.className = "select";
if(tab2) tab2.className = "unselect";
activeTabId = tabId;
clickPageId = pageId;
opacity = 100;
// 启动渐变隐藏页面的定时器
timer = setInterval(hidePage, 50);
}
</script>
</head>
<body>
<table>
<tr>
<td style="vertical-align: top;">
<div class="nav">
<a href="#" id="tab1" οnclick="switchPage('tab1', 'page1')" class="select"><span>页面</span></a>
<a href="#" id="tab2" οnclick="switchPage('tab2', 'page2')" class="unselect"><span>页面2</span></a>
<a href="#" id="tab3" οnclick="switchPage('tab3', 'page3')" class="unselect"><span>页面3</span></a>
<a href="#" id="tab4" οnclick="switchPage('tab4', 'page4')" class="unselect"><span>页面4</span></a>
</div>
</td>
<td>
<div id="content">
<div id="page1" class="select" style="filter:alpha(opacity=100);">这是页面1</div>
<div id="page2" class="unselect">这是页面2</div>
<div id="page3" class="unselect">这是页面3</div>
<div id="page4" class="unselect">这是页面4</div>
</div>
</td>
</tr>
</table>
</body>
</html>

piperzero

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站渐变效果代码

网页渐变效果 /* 控制导航栏的外观 */ .nav { float:left; width:200px; border: solid 1px #111111; } /* 控制导航栏内按钮的外观 */ .nav a{ line-height:18px; font-size: 12px; color: #000000; text-decoration: none; display: blo
复制链接

扫一扫