首页 > js如何为鼠标按下并且移动绑定一个函数(比如:实现鼠标按下不放并且移动才改变div的背景颜色)

js如何为鼠标按下并且移动绑定一个函数(比如:实现鼠标按下不放并且移动才改变div的背景颜色)

我想为这个滚动条添加一个新的功能 通过按下鼠标来左右移动内容

<DIV id="scrollobj" style="white-space:nowrap;overflow:scroll;;width:400px;" onmouseover="stop()" onmouseout="move()"><span id="sp">这里是待着要滚动的内容全世界中国人都要万      </span></DIV>

<script language="javascript" type="text/javascript">
    function scroll(obj) {
        var zy = (obj.scrollLeft) ++;
        //当滚动条到达右边顶端时
        if (obj.scrollLeft == zy) obj.innerHTML += obj.innerHTML;
        //当滚动条滚动了初始内容的宽度时滚动条回到最左端
        if (obj.scrollLeft >= obj.firstChild.offsetWidth) obj.scrollLeft = 0;
    }
    var di = document.getElementById('scrollobj');

    function move() {
        gd = setInterval("scroll(di)", 50);
    }
    move();

    function stop() {
    clearInterval(gd);
}

</script>


原生js用onmousemove事件绑定:http://www.w3school.com.cn/jsref/event_onmousemove.asp
jquery绑定move类型事件即可。


楼上的回答只解决了鼠标移动的问题,还应该加上鼠标按键事件
思路是先绑定鼠标按下事件,回调函数绑定鼠标移动事件+鼠标按键松开事件,移动事件回调改变div颜色,松开事件回调设置onmousemove=null,即清除移动事件。

原生js:
onmousedown 按下
onmousemove 移动
onmouseup 松开

jQuery:
click 按下
mousemove 移动
mouseup 松开

参考资料:
1.jQuery事件:
http://www.w3school.com.cn/jquery/jquery_ref_events.asp
2.javascript事件:
http://www.w3school.com.cn/jsref/dom_obj_event.asp

【热门文章】
【热门文章】