网页上下滚动网页特效代码- 鼠标代码

当前位置: 首页 > 图文教程 > 网页特效 > 鼠标代码 > 网页上下滚动网页特效代码

鼠标代码: 网页中图片鼠标指向后带图片的alt提示; 鼠标指向出现实用特殊提示的网页特效代码; 不错的可以在网页中用鼠标拖动的层特效; 网页特效:XP风格的网页右键菜单; 网页特效:控制鼠标中键的演示代码; 网页特效:网页中个性的小窗口; 特殊的鼠标悬停提示（网页特效代码）; 不间断滚动特效的简单测试特效代码; 网页上下滚动网页特效代码; CSS实现网页超级链接位移网页特效

技术文章搜索

关键字

鼠标代码中的网页上下滚动网页特效代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 214 ::

收藏到网摘: n/a

不间断滚动特效的简单测试特效代码 CSS实现网页超级链接位移网页特效

DIV+CSS结合js控制页面滚动的效果，非常实用，兼容ie，ff。

<head> <style type="text/css"> #container{ text-align: left; background-color: #faf7ec; width: 500px; margin: 20px auto 0 auto; padding: 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #block0, #block1, #block2, #block3, #block4, #block5 { border-top: solid 1px #785a3c; margin: 0; padding: 10px; } .active { background-color: #fff; } .visited { background-color: #ede7da; } #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, // setInterval id currentBlock : null, // object reference 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); }, 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')">链接 1</a> | <a href="javascript:ScrollWin.scroll('2')">链接 2</a> | <a href="javascript:ScrollWin.scroll('3')">链接 3</a> | <a href="javascript:ScrollWin.scroll('4')">链接 4</a> | <a href="javascript:ScrollWin.scroll('5')">链接 5</a> </div> <a name="anchor1"></a> <div id="block1"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a> 链接 1</h3> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <a name="anchor2"></a> <div id="block2"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a> 链接 2</h3> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <a name="anchor3"></a> <div id="block3"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a> 链接 3</h3> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <a name="anchor4"></a> <div id="block4"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a> 链接 4</h3> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <a name="anchor5"></a> <div id="block5"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a> 链接 5</h3> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> </div> </body>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

不间断滚动特效的简单测试特效代码 CSS实现网页超级链接位移网页特效

鼠标代码 中的 网页上下滚动网页特效代码

评论 (0) All

鼠标代码中的网页上下滚动网页特效代码