使用指针控制文字上下滚动的制作


很多站点都在主页上采用了可上移动的快速插入针来做站点更新及新闻,鼠标放到上下箭头的图片就能滚动。其实这个一点也不难,下面先看一下效果,再学一下是如何做的吧!

  制作方法:
  先建立CSS样式,代码:
  .opacity {BACKGROUND-COLOR: #993300; COLOR: #ff9900; FILTER: alpha(opacity=100)}

  将下面的代码复制到<head> ~ </head>里:
<script>
function movstar(a,time){
movx=setInterval("mov("+a+")",time)
}
function movover(){
clearInterval(movx)
}
function mov(a){
scrollx=new_date.document.body.scrollLeft
scrolly=new_date.document.body.scrollTop
scrolly=scrolly+a
new_date.window.scroll(scrollx,scrolly)
}
function o_down(theobject){
object=theobject
while(object.filters.alpha.opacity>60){
object.filters.alpha.opacity+=-10}
}
function o_up(theobject){
object=theobject
while(object.filters.alpha.opacity<100){
object.filters.alpha.opacity+=10}
}
function wback(){
if(new_date.history.length==0){window.history.back()}
else{new_date.history.back()}
}
</script>

  将下面的代码复制到向上箭头的<img>里:
<img alt=点住不放可以快速向上滚动 class=opacity onMouseDown=movover();movstar(-3,2) onMouseOut=movover();o_up(this) onMouseOver=movstar(-1,20);o_down(this) onMouseUp=movover();movstar(-1,20) src="http://www.blue1000.com/article/arrowup.gif" width="13" height="13" border="0" style="cursor:hand">

  将下面的代码复制到向下箭头的<img>里:
<img src="http://www.blue1000.com/article/arrowdown.gif" class="opacity" onMouseDown=movover();movstar(3,2) onMouseOut=movover();o_up(this) onMouseOver=movstar(1,20);o_down(this) onMouseUp=movover();movstar(1,20) alt="点住不放可以快速向下滚动" width="13" height="13" border="0" style="cursor:hand">

  将下面的代码复制到<table>中的一个<td>内,具体宽、高自拟:
<iframe border=0 frameborder=0 framespacing=0 height='100%' marginheight=0 marginwidth=0 name=new_date noResize scrolling=no src="http://www.blue1000.com/article/iframe.htm" width='445' vspale="0"></iframe>

  新建一个iframe.htm 的文件,放在同一级目录下。
  至此你就可以完成这个实例了!

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3