- 可控制的页面向上向下滚动特效，页面右下角的文字就是控制按钮，当网页内容超出原有高度的时候，也就是当网页右侧出现滚动条的时候，文字按钮就起作了，可以向上或向下滚动页面，无需点击文字，只需要把鼠标放过去就行了。在此提醒：控制文字可以换成图片哦，比如换成向上或向下的小箭头。
<html>
<head>
<style type="text/css">
#item {position:absolute; visibility:hidden; left:0px}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var isNS=(document.layers); //判断是否为NS的标志
var _all=(isNS)? '' : 'all.' ; //以下根据是否为NS生成表示文档对象属性的字符串
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown; //声明常用变量
function init(){ //这个函数用来进行页面初始化
item=eval('document.'+_all+'item'+_style); //定位操作对象item
getwindowsize(); //取窗口尺寸以定位浮动层
item.visibility=_visible; //将层设为可见
scrollpage(); //开始滚动页面
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth; //取窗口宽度
w_y=(isNS)? window.innerHeight : document.body.clientHeight; //取窗口高度
(isNS)? item.clip.width=42: item.width=42; //设定浮动层宽度
(isNS)? item.clip.height=20 : item.height=20; //设定浮动层高度
moveitem(); //定位浮动层
}
function resizeNS() { //在浏览器是NS的情况下
setTimeout('document.location.reload()',400); //只有用刷新的办法处理onresize事件
}
function moveitem() { //这个函数用来定位浮动层。
if (isNS) { //如果是NS
item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50)) //利用moveTo来定位层
}else{ //否则(是IE)
item.pixelLeft=document.body.scrollLeft+w_x-70; //用改变坐标属性的方法定位层
item.pixelTop=w_y+document.body.scrollTop-100;
}
}
window.onload=init; //设定初始化动作
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize;//根据浏览器的不同设定当页面大小被改变时的处理方法。
function scrollpage() { //这个函数用来根据需要卷动页面
status = ''; //消隐提示栏出现的"javascript:void(0)"无用信息
if (okscroll) { //如果允许滚动
if (godown) { //根据方向，利用scrollBy实现滚动操作
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
moveitem(); //滚动以后重设浮动层的位置
setTimeout('scrollpage()', 40); //设定下一次滚动页面的延时
}
// End -->
</script>
<title>可控制页面滚动的特效</title>
</head>
<body >
<div id="item">
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false">
向上</a>
<p>
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true" onMouseout="okscroll=false">
向下</a>
</div>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25
</body>
</html>
分享到：
相关推荐
一款jQuery实现的当页面向下或向上滚动时，网页触发区块动画特效，很有弹性的动感效果。
jQuery带按钮向上滚动向下滚动代码是一款jqScroll.js插件实现的，调用简单，代码注释很清楚。
jQuery带按钮向上滚动向下滚动代码是一款jqScroll.js插件实现的，调用简单，代码注释很清楚。
JS控制图片向上向下滚动代码
jQuery页面滚动背景图片模糊放大特效是一款当网页向下滚动时背景模糊放大效果，向上滚动时又缩小恢复，挺有意思的。
这是一款超酷的jQuery和css3页面顶部内容滚动缩小视觉差特效插件。该视觉差插件当页面向下滚动时，顶部的图片介绍内容会以3d缩小的方式收缩；向上回滚时又以相反的方式放大。
jQuery页面滚动触发区块特效是一款当页面向下或向上滚动时，区块动画特效。
这是一款滚动页面标题文字动态变化js特效。该特效在页面向下或向上滚动时，当进入指定的视口区域，标题文字会产生炫酷的动画效果。
OnePageScroll.js是一款带有背景视觉差效果的jQuery整页滚动特效插件。OnePageScroll.js能够滚动一次鼠标滚轮就使整个页面向上或向下翻动一页。并且在页面滚动时还带有一点视觉差效果。
EasyMotion是一款jquery滚动进入视口动画特效插件。EasyMotion插件可以在页面向下滚动，指定元素进入浏览器视口时，对元素执行指定的CSS3动画效果。EasyMotion内置了9种CSS3动画特效。
2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法 #google1 { border:none; width:270px; height:20px; margin:0px 0; font-size:12px; padding-left:0px; overflow:hidden; font-family:Arial;...西游战记炫
这是一款效果非常炫酷的jQuery和CSS3全屏开关门切换页面特效。该页面切换特效可以使用鼠标上下滚动来切换页面。向下滚动时页面像开门一样从中间展开展示下一页，向上滚动时页面像关门一样从两侧收缩展示上一页。
jQuery滚动到顶部和底部的动态特效代码，在页面底部的左侧有两个箭头，一个是向上，一个是向下，点击相应的箭头，会将页面往对应的方向平滑滚动，比如向上的话，可滚动至页面的顶部，有缓冲的效果，了解缓冲效果的...
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能，他能帮助新手和高级开发者们创造美好的用户体验。...jquery滚动到顶部底部向上向下效果： jquery滚动到顶部底部仅向下效果：
实现图片文字，向左，向右，向上，向下无缝滚动，适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)
jQuery页面滚动触发区块特效是一款当页面向下或向上滚动时，区块动画特效。
代码简介：jQuery滚动自动隐藏导航菜单代码是一款导航菜单在页面向下滚动时会自动进行隐藏，在页面向上滚动时，菜单又会自动出现。
这是一款非常有创意的jQuery和CSS3两栏滚动幻灯片特效。该幻灯片特效将图片分为两半，在图片滚动切换时一半向上滚动，一半向下滚动，就像图片被切割开一样，效果很酷。
js鼠标滚动自动隐藏导航菜单是一款当页面向下滚动的时候可以帧动画隐藏，在向上滚动到一定距离时又会显示出来。