目前流行的DIV+JS内容滚动导航特效

正常访问状态！

http://www.guosp.com
碧海澜涛居
海纳百川，有容乃大。壁立千刃，无欲则刚！

关键词：

技术资料 >> 网页特效

搜索标签：暂无标签
目前流行的DIV+JS内容滚动导航特效
[阅读次数：2830次] [发布时间：2009年7月3日]
目前流行的DIV+JS内容滚动导航特效 <html> <head> <title>滚动导航</title> <style type="text/css"> #container{ text-align: left; background-color: #faf7ec; width: 499px; margin: 20px auto 0 auto; padding: 0; font-family:Arial, Helvetica, sans-serif; } #block0, #block1, #block2, #block3, #block4, #block5 { border-top: solid 1px #785a3c; margin: 0; padding: 10px; } #block0, #block0.active, #block0.visited { text-align: center; background-color: #a0dcf8; border-top: none; border-bottom: solid 4px #785a3c; } </style> <script> var ScrollWin = { w3c : document.getElementById, iex : document.all, scrollLoop : false, scrollInterval : null, currentBlock : null, getWindowHeight : function(){ if(this.iex) return (document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight; else return window.innerHeight; }, getScrollLeft : function(){ if(this.iex) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft; else return window.pageXOffset; }, getScrollTop : function(){ if(this.iex) return (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop; else return window.pageYOffset; }, getElementYpos : function(el){ var y = 0; while(el.offsetParent){ y += el.offsetTop el = el.offsetParent; } return y; }, scroll : function(num){ if(!this.w3c){ location.href = "#"+this.anchorName+num; return; } if(this.scrollLoop){ clearInterval(this.scrollInterval); this.scrollLoop = false; this.scrollInterval = null; } if(this.currentBlock != null) this.currentBlock.className = this.offClassName; this.currentBlock = document.getElementById(this.blockName+num); this.currentBlock.className = this.onClassName; var doc = document.getElementById(this.containerName); var documentHeight = this.getElementYpos(doc) + doc.offsetHeight; var windowHeight = this.getWindowHeight(); var ypos = this.getElementYpos(this.currentBlock); if(ypos > documentHeight - windowHeight) ypos = documentHeight - windowHeight; this.scrollTo(0,ypos); }, // www.codefans.net scrollTo : function(x,y){ if(this.scrollLoop){ var left = this.getScrollLeft(); var top = this.getScrollTop(); if(Math.abs(left-x) <= 1 && Math.abs(top-y) <= 1){ window.scrollTo(x,y); clearInterval(this.scrollInterval); this.scrollLoop = false; this.scrollInterval = null; }else{ window.scrollTo(left+(x-left)/10, top+(y-top)/10); } }else{ this.scrollInterval = setInterval("ScrollWin.scrollTo("+x+","+y+")",20); this.scrollLoop = true; } } }; ScrollWin.containerName = "container"; ScrollWin.anchorName = "anchor"; ScrollWin.blockName = "block"; ScrollWin.onClassName = "active"; ScrollWin.offClassName = "visited"; </script> </head> <body> <div align="center"> <div id="container"> <a name="anchor0"></a> <div id="block0"> <a href="javascript:ScrollWin.scroll('1')">ASP</a> \| <a href="javascript:ScrollWin.scroll('2')">PHP</a> \| <a href="javascript:ScrollWin.scroll('3')">JSP</a> \| <a href="javascript:ScrollWin.scroll('4')">AJAX</a> \| <a href="javascript:ScrollWin.scroll('5')">EXT</a> </div> <a name="anchor1"></a> <div id="block1"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> ASP</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor2"></a> <div id="block2"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> PHP</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor3"></a> <div id="block3"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> JSP</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor4"></a> <div id="block4"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> AJAX</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor5"></a> <div id="block5"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> EXT</h3> <p>内容</p> <p>内容</p> </div> </div> </div> </body> </html> 注：可手动修改代码后运行！本页地址： [复制地址]
返回顶部

评论统计（0条）| 我要评论

暂无评论内容！

我要评论

我要评论：

带*部分需要填写

姓名称呼：

* 请填写您的姓名或呢称

联系方式：

QQ,MSN,Email都可以，方便交流 (仅管理员可见)

评论内容：

* 不超过100字符，50汉字

验证码：

最近更新

·Host 'XXX' is not allowed...
·Win2008或IIS7的文件上传大...
·IIS7.0上传文件限制的解决方...
·测试信息2015-03-11
·asp.net中处理图片
·ASP.NET之Web打印－终极解决...
·Asp.net下C#调用Word模版实...
·asp.net下将页面内容导入到...
·asp.net导出为pdf文件
·asp.net生成pdf文件
·FCKeditor 文本编辑器的使用...
·ASP.NET 将数据生成PDF
·asp.net2.0导出pdf文件完美...
·AspJpeg的安装与测试
·JS验证浏览器版本对IE11的支...

碧海澜涛居

网站首页｜关于本站｜站长简介｜开发案例｜技术资料｜美文日志｜摄影相册｜读书收藏｜影视收藏｜留言板

免责声明：本站为个人网站，站内所有文字、图片等各类资料均为个人兴趣爱好所收集，不用作任何商业用途，亦不保证资料的真实性，若有因浏览本站内容而导致的各类纠纷，本站也不承担任何责任。本站部分内容来自互联网，如有涉及到您的权益或隐私请联系站长解决。