双击鼠标模拟滚轮效果

人气：　来源：网络　作者：佚名　所属栏目：鼠标类　[切换到繁體中文]

介绍：双击鼠标，上下拉动看看吧，和滚轮效果是不是一样呢。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_双击鼠标模拟滚轮效果</title>
<style><!--body,td{font-size: 12px;}--></style>
<script language="JavaScript">
<!--
var scrollcount=0;
var scrollarrowtop;
function showarrow() {
scrollarrow.style.visibility='visible';
scrollarrow.style.left=document.body.scrollLeft+event.clientX-10;
scrollarrow.style.top=document.body.scrollTop+event.clientY-20;
scrollarrowtop=event.clientY;
scrollcount=1;
}

function scrollit() {
if (scrollcount==1) 
	{
	scrollarrow.style.top=document.body.scrollTop+scrollarrowtop-20;
	}
}

function scrollall() {
if (scrollcount==1) 
	{
	var newy=document.body.scrollTop+event.clientY-20;
	if (newy>scrollarrow.offsetTop) {window.scrollBy(0,(newy-scrollarrow.offsetTop)/10>12?12:(newy-scrollarrow.offsetTop)/10);scrolldown.innerHTML='△';scrollup.innerHTML='▲';}
	if (newy<scrollarrow.offsetTop) {window.scrollBy(0,(newy-scrollarrow.offsetTop)/10<-12?-12:(newy-scrollarrow.offsetTop)/10);scrollup.innerHTML='△';scrolldown.innerHTML='▲';}

	}
}

// -->
</script>
</head>
<body bgcolor="" onclick="scrollarrow.style.visibility='hidden';scrollcount=0;" ondblclick="showarrow()" onmousemove="scrollall()" onscroll="scrollit()" scroll="yes">
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<div id="scrollarrow" style="position:absolute; width:18px; height:29px; z-index:1; left: 540px; top: 30px; visibility: hidden">
<table width="20" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" id=scrollup style="">▲</td>
</tr>
<tr>
<td align="center" id=scrolldown style="filter:flipv;">▲</td>
</tr>
</table>
</div>
双击鼠标，上下拉动看看吧
</td>
</tr>
</table>
</body>
</html>

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

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：onclick="scrollarrow.style.visibility='hidden';scrollcount=0;" ondblclick="showarrow()" onmousemove="scrollall()" onscroll="scrollit()" scroll="yes"
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

function scrollit() {
if (scrollcount==1)
{
scrollarrow.style.top=document.body.scrollTop+scrollarrowtop-20;
}
}

function scrollall() {
if (scrollcount==1)
{
var newy=document.body.scrollTop+event.clientY-20;
if (newy>scrollarrow.offsetTop) {window.scrollBy(0,(newy-scrollarrow.offsetTop)/10>12?12:(newy-scrollarrow.offsetTop)/10);scrolldown.innerHTML='△';scrollup.innerHTML='▲';}
if (newy<scrollarrow.offsetTop) {window.scrollBy(0,(newy-scrollarrow.offsetTop)/10<-12?-12:(newy-scrollarrow.offsetTop)/10);scrollup.innerHTML='△';scrolldown.innerHTML='▲';}

}
}

// -->
</script>

<div id="scrollarrow" style="position:absolute; width:18px; height:29px; z-index:1; left: 540px; top: 30px; visibility: hidden">
<table width="20" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" id=scrollup style="">▲</td>
</tr>
<tr>
<td align="center" id=scrolldown style="filter:flipv;">▲</td>
</tr>
</table>
</div>
双击鼠标，上下拉动看看吧