JS事件高级应用

最新推荐文章于 2024-07-25 14:02:05 发布

-Y、

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量121

点赞数

分类专栏： javascript 文章标签： javascript html css js

本文链接：https://blog.csdn.net/weixin_44776706/article/details/105452271

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

==================================================================
事件绑定：（可以让同一对象用于两个同名事件不同显示）
DOM方式
addEventListener（事件名称不加‘on’，函数，false）
removeEventListener（事件名称不加‘on’，函数，false）

 window.onload=function(){
            var obtn=document.getElementById('div1')
            obtn.addEventListener('click',function(){
                alert('a')
            })
            obtn.addEventListener('click',function(){
                alert('b')
            })
        }

==================================================================

自定义进度条与自定义内容的联动：
通过拖拽块在进度条的比例来控制内容的移动
注意要用负值

看注释

<style>
        #div1{
            width: 600px;height: 20px;background-color: gray;position: relative;margin: 10px auto;
        }
        #div2{
            width: 20px;height: 20px;background-color: aquamarine;position: absolute;
        }
        #div3{
            width: 400px;height: 400px;border: 1px solid black;position: relative;overflow: hidden;
        }
        #content1{
            top: 0px;position: absolute;
        }
    </style>
     <script>
        window.onload=function(){
            var odiv2=document.getElementById('div2')
            var odiv1=document.getElementById('div1')
            var odiv3=document.getElementById('div3')
            var ocontent1=document.getElementById('content1')
            

            odiv2.onmousedown=function(){
                var oevent=event
                var disX=oevent.clientX-odiv2.offsetLeft//获取div中鼠标的位置
                var disY=oevent.clientY-odiv2.offsetTop
             
                document.onmousemove=function(){
                    var oevent=event
                    var oleft=oevent.clientX-disX//用鼠标的新位置减去，鼠标在div中的位置，获得div在document中的位置

                    //封进度条的边界
                    if(oleft<0)
                    {
                        oleft=0
                    } 
                    else if(oleft>odiv1.offsetWidth-odiv2.offsetWidth)
                    {
                        oleft=odiv1.offsetWidth-odiv2.offsetWidth
                    }

                 
                    odiv2.style.left=oleft+'px'
                    var percent=odiv2.offsetLeft/580//580相当于进度条的长度减去拖选块的长度
                    document.title=percent

                    ocontent1.style.top=(ocontent1.offsetHeight-odiv3.offsetHeight)*(-percent)+'px'//内容的移动距离要少一个跟显示框高一样的距离

                }

                document.onmouseup=function(){
                   
                    document.onmousemove=null//消除当松开鼠标也松开移动函数
                           
                }
                return false
            }

        }
    </script>
</head>
<body>
    <div id="div1"> 
        <div id="div2"></div>
    </div>
    <div id="div3">
        <div id="content1">
                    （想装填的内容）
            </div>
    </div>

-Y、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件高级应用

==================================================================事件绑定：DOM方式addEventListener（事件名称不加‘on’，函数，false）removeEventListener（事件名称不加‘on’，函数，false）==========================================...
复制链接

扫一扫

专栏目录