search

BestACE / fed

旨为锤炼前端开发工程师的前端开发基础课程，重点学习利用html和css实现页面布局，利用JS实现交互开发。:thumbsup:
207 stars 137 forks source link

【讨论帖】关于上课讲到的滚轮事件 #354

Open wabxq opened 6 years ago

wabxq commented 6 years ago 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                background-color: skyblue;
                margin-top: -320px;
                margin-left: 1200px;
                position: fixed;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div >
            <h1 id="four" >滑动滚轮</h1>
        </div>  
        <script>
            var ofour=document.querySelector("#four");
            ofour.addEventListener('mousewheel',function(e){
                  var zoom=parseInt(ofour.style.zoom, 10)||100;
                              zoom+=event.wheelDelta/12;
                              console.log(zoom);
                              if (zoom>0) ofour.style.zoom=zoom+'%';
                              return false;
            });
        </script>
    </body>
</html>
SDQ997 commented 6 years ago

看不懂楼上的

wabxq commented 6 years ago

滚轮事件的代码，将原先的four的id移到h1上，因为滚轮事件是发生在h1上的，而且div没有这个属性

wabxq commented 6 years ago 
//可以使用event.target
var ofour = document.querySelector("#four");
ofour.addEventListener('mousewheel', function(e) {
    var zoom = parseInt(event.target.style.zoom, 10) || 100;
    zoom += event.wheelDelta / 12;
    if(zoom > 0) event.target.style.zoom = zoom + '%';
    return false;
});

//也可以使用event.currentTarget
var ofour = document.querySelector("#four");
ofour.addEventListener('mousewheel', function(e) {
    var zoom = parseInt(event.currentTarget.style.zoom, 10) || 100;
    zoom += event.wheelDelta / 12;
    if(zoom > 0) event.currentTarget.style.zoom = zoom + '%';
    return false;
});
RubinTry commented 6 years ago

其实，你可以把教程做成一个网页^_^，再往这里发链接

zptcsoft commented 6 years ago

@wabxq 分享知识点很好很棒！！ 如果能够层次更分明写、条理更清晰些就更棒了！！