49、鼠标放到相应在图片上就可以实现页面的上下移动

49、鼠标放到相应在图片上就可以实现页面的上下移动

要完成此效果需要两个步骤

 

第一步:把如下代码加入到<head>区域中

 

<SCRIPT LANGUAGE="JavaScript">

 

 

 

 

 

<!-- Begin

 

var isNS=(document.layers);

 

var _all=(isNS)? '' : 'all.' ;

 

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);

 

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() {

 

setTimeout('document.location.reload()',400);

 

}

 

function moveitem() {

 

if (isNS) {

 

item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))

 

}else{

 

item.pixelLeft=document.body.scrollLeft+w_x-70;

 

item.pixelTop=w_y+document.body.scrollTop-50;

 

   }

 

}

 

window.onload=init;

 

(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;

 

function scrollpage() {

 

status = '';

 

if (okscroll) {

 

if (godown) {

 

(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>

 

 

第二步:把如下代码加入到<body>区域中

 

<div id="item">

 

<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"

 

onMouseout="okscroll=false"><img src="gt.gif" border="0" alt="向上"></a><a

 

href="javascript:void(0)"

 

onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="lt.gif"

 

border="0" alt="向下"></a>

 

</div>

 

 

Write a comment

Comments: 0