求“用JS(javascript)如何判断滚动条移动的方向?”代码

求“用JS(javascript)如何判断滚动条移动的方向?”代码,第1张

浏览器差异:firefox滚轮事件是DOMMouseScroll,其他浏览器使用的是mousewheel

firefox事件的event对象使用detail值表示滚轮反向,(-3)表示向上,(3)表示向下。

其他浏览器使用wheelDelta值表示表示滚轮方向,(120)表示向上, (-120)表示向下。

监听事件,删除监听事件:IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。

fixedEvent:判断滚轮方向

fixedFn:滚动滚轮取消滚轮的默认滚动网页行为

elwheelHash:把fixedFn存放到对象的wheelHash属性

var mousewheel = (function(){
    var types =['DOMMouseScroll','mousewheel'];
    fixedEvent = function(e){
        ewheel = (ewheelDelta ewheelDelta : -edetail) > 0 1 : -1;// 通过事件判断鼠标滚轮反向,1是向上,-1是向下
        ewheelDir = ewheel > 0 'up' : 'down';    //这个只是描述 ewheel的值和滚轮方向的关系
        return e;
    };
    return{//返回mousewheel的方法
        on: function(el, fn, preventDefault){ //mousewheel对象的on方法, el触发mousewheel事件对象,fn触发后执行函数,preventDefault是否阻止默认行为:滚轮的网页滚动效果
            if(typeof preventDefault != 'boolean'){ //如果传入的实参preventDefault不是布尔值 
                preventDefault = true; //初始化为true
            }    
            var fixedFn = function(e){ //阻止默认行为函数
                e = fixedEvent(e || windowevent); // 兼容写法, 返回的e用来判断滚轮方向
                if(preventDefault){ // 如果需要阻止默认行为
                    if(epreventDefault){    //firefox
                        epreventDefault();
                    }
                    else{
                        ereturnValue = false; //ie
                    }
                };
                fncall(el, e); //el事件对象调用fn函数,参数为e; 注意fn中使用ewheel去判断鼠标滚轮事件
            },
            wheelHash = elwheelHash; //把包含fixedFn函数的 elwheelHash属性 赋值给 wheelHash
            if(!wheelHash){  //判断函数是否存在 wheelHash 对象
                wheelHsah = {};
                wheelHash[fn] = fixedFn;  //wheelHash对象的属性fn为阻止默认行为函数
                elwheelHash = wheelHash;  //把wheelHash对象赋值给el的wheelHash属性  wheelHash[fn] == elwheelHash[fn]
            }else{
                if(wheelHash[fn]) return; //如果存在 wheelHash 且 wheelHash中有 fixedFn 那么返回
                wheelHash[fn] = fixedFn;  //如果没有, 就把fixedFn赋值给wheelHashfn
            };
            if(documentaddEventListener){  //firefox
                var i = typeslength;  
                while(i--){  //循环滚轮事件 数组
                    eladdEventListener(types[i], fixedFn, false);    //firefox el监听滚轮事件,执行取消默认行为
                }
            }
            else{  //ie
                elattachEvent('onmousewheel', fixedFn);     // ie 监听事件, 处理函数fixedFn
            }
        },  
    //mousewheel中的on方法作用: 让元素监听事件,且处理是否执行默认行为。并且保存事件的阻止默认行为函数fixedFn到对象elwheelHash属性中,
        un: function(el, fn){
            if(!elwheelHash) return;  //如果对象不存在wheelHash, 直接跳出(没效果了);
            var wheelHash = elwheelHash;
            if(documentremoveEventListener){  //firefox
                var i = typeslength;
                while(i--){
                    elremoveEventListener(types[i],wheelHsah[fn], false);  //删除监听事件,执行取消默认行为
                }
            }else{ //ie
                eldetachEvent('onmousewheel', wheelHash[fn]);
            }
                delete wheelHash[fn]; //删除 默认行为函数
        },
    }
})();
//定义滚轮事件
// var myWheel = function(e){
    // consolelog(ewheelDir);
// }
//添加滚轮事件
// mouseWheelon(element, myWheel);
//删除滚轮事件
// mouseWheelun(element, myWheel);

function showImg(index){
var adWidth = $("content_right ad")width();
$("slider")stop(true,false)animate({left : -adWidthindex},1000);
$("num li")removeClass("on")
eq(index)addClass("on");
}
当然你也要调整样式的

向上滚动的代码:
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1jpg" width="156" height="200" /><br><img src="pic/2jpg" width="160" height="198" /><br><img src="pic/3jpg" width="155" height="200" /><br><img src="pic/4jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2innerHTML=demo1innerHTML//克隆demo1为demo2
function Marquee(){
if(demo2offsetHeight-demoscrollTop<=0)//当滚动至demo1与demo2交界时
demoscrollTop-=demo1offsetHeight//demo跳到最顶端
else{
demoscrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
demoonmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demoonmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>
向下滚动:
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1jpg" width="156" height="200" /><br><img src="pic/2jpg" width="160" height="198" /><br><img src="pic/3jpg" width="155" height="200" /><br><img src="pic/4jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2innerHTML=demo1innerHTML
function Marquee(){
if(demoscrollTop<=0)
demoscrollTop+=demo2offsetHeight
else{
demoscrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demoonmouseover=function() {clearInterval(MyMar)}
demoonmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左滚动:
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1jpg" width="156" height="200" /><img src="pic/2jpg" width="160" height="198" /><img src="pic/3jpg" width="155" height="200" /><img src="pic/4jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2innerHTML=demo1innerHTML
function Marquee(){
if(demo2offsetWidth-demoscrollLeft<=0)
demoscrollLeft-=demo1offsetWidth
else{
demoscrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demoonmouseover=function() {clearInterval(MyMar)}
demoonmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

<!--
在标签里添加onmouseover事件,并且将该地址作为参数传给show_big函数
-->
<meta ><script>
var show = 0;
function leftRun(){
show-=100;
documentgetElementById("b")stylemarginLeft = show+"px";
}
function leftRun(){
show+=100;
documentgetElementById("b")stylemarginRight= show+"px";
}
</script>
<div id="a" width="500">
<div id="b" width="1000">
正文内容
</div>
</div>
<input type="button" id="leftRun" onclick="leftRun()" />
<input type="button" id="rightRun" onclick="rightRun()" />

在你原来的代码上进行了修改,加粗倾斜的部分是添加或者修改的位置

<script>

  var timer1 = null;

  var el = null;

  var left = 1;

  function moveItRight() {

      if (parseInt(elstyleleft) > (screenwidth - 50)) //elstyleleft = 0;

        {

            left = -1;

        }

        else if (parseInt(elstyleleft) <= 0) {

            left = 1;

        }

        elstyleleft = parseInt(elstyleleft) + 2 left + 'px';//本题目最关键的一句代码,让el对象的左边距每次循环都增加2像素,也就是向右移动了2像素

      timer1 = setTimeout(moveItRight, 25);//隔25毫秒后运行一次moveItRight函数

  }

  windowonload = function () {

      el = documentgetElementById("div1");

      elstyleleft = '500px';

      moveItRight();

  }

</script>

根据你的具体情况,有两种思路。
第一种,类似于滑动效果,用强父元素,overflow:hidden了。然后通过点击左右的键,获取当前父元素的宽度,修改父元素css属性的left,注意,position:absolute时left才起作用。
第二种就比较简单。就是简单的隐藏,点击左右,隐藏第一屏的信息,再次点击,隐藏第一、第二屏的信息,依次类推,当最后一屏的时候,又开始显示第一屏的信息,这样就是循环了。可以用fadeIn()等方法来加入一些效果
思路就是这样,说起来麻烦,其实很简单、


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13407054.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-30
下一篇 2023-07-30

发表评论

登录后才能评论

评论列表(0条)

保存