鼠标滚轮事件

最新推荐文章于 2024-03-25 09:02:34 发布

----面具----

最新推荐文章于 2024-03-25 09:02:34 发布

阅读量243

点赞数

分类专栏： html5

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <script type="text/javascript" charset="utf-8">
         function move(id, lr) {
            var obj = document.getElementById(id);
            var objWidth = obj.offsetWidth;
            var objParWidth = obj.parentNode.offsetWidth;
            switch (lr) {
                case - 1 : if (objParWidth < objWidth) {
                    obj.style.left = obj.offsetLeft - 100 + "px";
                    if (obj.offsetLeft < (objParWidth - objWidth)) {obj.style.left = objParWidth - objWidth + "px";}
                }
                break;
                case 1 : if (objParWidth < objWidth) {
                    obj.style.left = obj.offsetLeft + 100 + "px";
                    if (obj.offsetLeft > 0) {obj.style.left = 0 + "px";}
                }
                ;break
            }
            obj = objWidth = objParWidth = null
        }
        function wheel(event) {
            var date = 0;
            event.preventDefault();
            var e = window.event || event;
            date = Math.max( - 1, Math.min(1, (e.wheelDelta || -e.detail)));
            move('table', date);
        }
</script>
    <script type="text/javascript">
    window.onload = function(){document.getElementById("table").onmousedown=changeBgcolor.change}
    var changeBgcolor={
        lastObj:null,change:function(e){
            if(this.lastObj!=null){
                this.lastObj.style.backgroundColor=""
            }
            e.target.parentNode.style.backgroundColor="#AFF0FF";this.lastObj=e.target.parentNode
        }
    }
</script>
    <style type="text/css">
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        table tr td {
            border-style: outset;
            border-width: 1px;
            border-color: #000000;
            padding: 3px 3px 3px 5px;
        }

        table {
            /*边框无边距*/
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <div style="width:600px;overflow:outo;overflow-y:hidden;">
        <table id="table" style="width:800px;position:relative;">
            <tbody>
                <tr class="firstRow">
                    <td>姓名</td>
                    <td>语文</td>
                    <td>数学</td>
                    <td>英语</td>
                    <td>物理</td>
                    <td>化学</td>
                    <td>生物</td>
                    <td>历史</td>
                    <td>地理</td>
                    <td>政治</td>
                    <td>信息技术</td>
                    <td>总分</td>
                </tr>
                <tr>
                    <td style="word-break: break-all;">张三</td>
                    <td>96</td>
                    <td>95</td>
                    <td>100</td>
                    <td>65</td>
                    <td>61</td>
                    <td>63</td>
                    <td>42</td>
                    <td>54</td>
                    <td>45</td>
                    <td>66</td>
                    <td>687</td>
                </tr>
                <tr>
                    <td style="word-break: break-all;">李四</td>
                    <td>89</td>
                    <td>88</td>
                    <td>106</td>
                    <td>67</td>
                    <td>44</td>
                    <td>81</td>
                    <td>51</td>
                    <td>62</td>
                    <td>39</td>
                    <td>54</td>
                    <td>681</td>
                </tr>
            </tbody>
        </table>
    </div>
    <p>在表格上滚动鼠标滚轮可查看滚动效果；点击任意行可选中</p>
    <script>
        if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
            var obj = document.getElementById('table');
            if (obj.addEventListener) {
                // IE9, Chrome, Safari, Opera 
                obj.addEventListener("mousewheel", wheel, false);
                // Firefox
                obj.addEventListener("DOMMouseScroll", wheel, false);
            } else {
                // IE 6/7/8
                obj.attachEvent("onmousewheel", wheel);
            }
            obj.parentNode.style.overflow="hidden";
        }
    </script>
</body>

----面具----

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮事件

<!DOCTYPE html><head> <meta charset="utf8"> <script type="text/javascript" charset="utf-8"> function move(id, lr) { var obj = document.getElementById(id); var o
复制链接

扫一扫