就是我页面里有一张图片,鼠标滚轮可以放大缩小这张图片,但是鼠标滚动的同时滚动条也跟着滚了,如何在鼠标移到图片上时禁止滚动条滚动呢

解决方案 »

  1.   

    <script>
        var firefox = navigator.userAgent.indexOf('Firefox') != -1;
        function MouseWheel(e) {
        ///对img按下鼠标滚路,阻止视窗滚动
            e = e || window.event;
            if (e.stopPropagation) e.stopPropagation();
            else e.cancelBubble = true;
            if (e.preventDefault) e.preventDefault();
            else e.returnValue = false;        //其他代码
        }
        window.onload = function () {
            var img = document.getElementById('img');
            firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);
        }
    </script><div style="height:100px"></div>
    <img src="http://avatar.profile.csdn.net/C/5/A/1_px372265205.jpg" id="img" style="width:200px"/>
    <div style="height:1000px"></div>
      

  2.   


    放大缩小自己编写逻辑就行了,获取是向上还是向下滚动,然后设置img的大小。。javascript鼠标滚轮滚动事件
      

  3.   

    <!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>
    <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    var pic=(function(){
    var px=0;
    var size=100
    // 获取鼠标轨迹上或者下
    var getmovepx=function(){
    return px=event.wheelDelta;
    }
    var getsize=function(){
    return size+"%";
    }
    return {
    change:function(){
    var v=getmovepx();
    /*判断鼠标滚轮是向上滚动还是向下滚动*/
    if(v>0){ // 如果滚轮向上滚动
    if(size<200){// 限制图片大小最大200%
    size+=20;
    }
    }else{ // 如果滚轮向下滚动
    if(size>20){ // 限制图片大小最小20%
    size-=20;
    }
    }
    $("#test01").css({"width":getsize(),"height":getsize()});
    return false;
    }
    }
    }());
    </script>
    </head>
    <body>
    <img id="test01"  onmousewheel="return pic.change();" src="test.jpg"/>
    </body>
    </html>
    lz 这个可是自己手写的 要给分啊,