QQ网站渐变效果的制作方法

时间：2021-05-02

第一步: 制作导航栏和内容页。

首先要制作导航栏和内容页，这样才能继续后面的工作。

打开网页制作软件Dreamweaver，按组合键“Ctrl+N”打开“新建文档”对话框。依次单击窗口左边的“空白页”、窗口中间“页面类型”字样下方的“HTML”和窗口右下角的“创建”按钮。这样便创建了一个空白的网页文件。

在“<body>”字样下方输入以下代码：

<table><tr><td style="vertical-align: top;"><div class="nav"><a href="#" id="tab1" onclick="switchPage('tab1', 'page1')" class="select"><span>页面</span></a><a href="#" id="tab2" onclick="switchPage('tab2', 'page2')" class="unselect"><span>页面2</span></a><a href="#" id="tab3" onclick="switchPage('tab3', 'page3')" class="unselect"><span>页面3</span></a><a href="#" id="tab4" onclick="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>

第二步：编写CSS代码

导航栏和内容区制作好了，下面用CSS代码控制他们的外观。

在“</head>”字样的上方输入如下代码：

<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;}.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>

第三步：编写JavaScript代码

下面编写实现了渐变切换效果的JavaScript代码。

在“</head>”字样上方输入下面的代码：

<script type="text/javascript">var activeTabId = 'tab1'; // 当前被选中的按钮的 IDvar activePageId = 'page1'; // 当前正显示的页面（暨内容区）的 IDvar 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 则将其设置为 selectif(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>

本文源自：翔宇亭——IT乐园（http://www.biye5u.com），转载请保留此信息！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章