js动态向上滚动(jquery也行)

JavaScript013

js动态向上滚动(jquery也行),第1张

说的是最上面的导航栏吧,

<nav>

 <a href="javascript:" >home</a>

 <a href="javascript:" >page1</a>

</nav> nav{

 position:fixed

 top:0

 left:0

 width:100%

 height:40px

 background-color:#d9d9d9

}

html已经封好了,不用js,

在html页面里用拷下面的标签试试

<marquee direction="down">

<dl>

<dt><b>我的账户</b>

<dd style="color:blue">基本资料</dd>

<dd style="color:blue">修改密码</dd>

<dd style="color:blue">修改头像</dd>

</dt>

<dt><b>好友</b>

<dd style="color:blue">我的好友</dd>

<dd style="color:blue">好友管理</dd>

<dd style="color:blue">查找好友</dd>

</dt>

</dl>

</marquee>

向上滚动 改个参数即可。。

判断鼠标滚轮是向上或向下滚动,不同的浏览器的判别方式是不一样的,当前比较流行的浏览器有 IE,Opera,Safari,Firefox,Chrome,在这个问题上Firefox和其他浏览器的实现方式是不一样的。现在通过一个具体的示例来分析这个问题吧!

示例代码如下:

<label for="wheelDelta"滚动值:</label(IE/Opera)<input type="text" id="wheelDelta"/

<label for="detail"滚动值:(Firefox)</label<input type="text" id="detail"/

<script type="text/javascript"

/*注册事件*/

if(document.addEventListener){

document.addEventListener('DOMMouseScroll',scrollFunc,false)}//W3Cwindow.onmousewheel=document.onmousewheel=scrollFunc//IE/Opera/Chrome

var scrollFunc=function(e){

e=e || window.event

var t1=document.getElementById("wheelDelta")

var t2=document.getElementById("detail")

if(e.wheelDelta){//如果是IE/Opera/Chrome浏览器

t1.value=e.wheelDelta

}else if(e.detail){//如果是Firefox浏览器

t2.value=e.detail}}</script

通过运行上述代码我们可以看到:

在 Firefox 中使用detail,其余浏览器使用的是wheelDelta;两者虽在取值上不一致,但实际意思是一样的,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。

在非firefox浏览器中,滚轮向上滚动返回的数值是120,向下滚动返回-120

而在firefox浏览器中,滚轮向上滚动返回的数值是-3,向下滚动返回3

代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail判别为是firefox浏览器

if(e.wheelDelta){//IE/Opera/Chrome

t1.value=e.wheelDelta