zoukankan      html  css  js  c++  java
  • 水平拖动滚动条案例

    <!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style>
            #demo{
                400px;
                height:20px;
                background-color: gray;
                margin:100px;
                position: relative;
            }
            #demo #bar{
                10px;
                height:40px;
                background-color:pink;
                position:absolute;
                top:-10px;
                left:0;
            }
           #demo #jindu{
                0
                height:40px;
                background-color:pink;
                position:absolute;
                top:-10px;
                left:0;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="bar"></div>
            <div id="jindu"></div>
        </div>
        <div id="wenzi"></div>
    </body>
    </html>
    <script>
        var demo=document.getElementById("demo");
        var bar=document.getElementById("bar");
        var jindu=document.getElementById("jindu");
        var wenzi=document.getElementById("wenzi");
        bar.onmousedown=function (event)  //onmousedown当鼠标按下的时候
        {
            var event=event||window.event;
            var leftval=event.clientX-demo.offsetLeft;  //按下鼠标的时候,记录bar相对demo移动的距离
            //alert(leftval);
            document.onmousemove=function (event)   //拖动原理,鼠标按下接着移动鼠标,拖动一定写道按下里面
            {
                var event=event||window.event;
                bar.style.left=event.clientX-demo.offsetLeft-leftval +"px";//bar移动的距离
                if(parseInt(bar.style.left)<0)
                {
                    bar.style.left=0;
                }
                if(parseInt(bar.style.left)>390)
                {
                    bar.style.left=390+"px";
                }
                jindu.style.left=bar.style.left;
                wenzi.innerHTML="已经拖动"+parseInt((parseInt(bar.style.left)/390 *100))+"%";
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();//防止选择拖动
            }
    
    
    
            document.onmouseup=function () {
                document.onmousemove = null; //弹起鼠标不做任何操作
            }
    
        }
    </script>
    

      

  • 相关阅读:
    ipa在线下载安装(itms-services)
    linux环境下无文件执行elf
    Linux Running State Process ".so"、"code" Injection Technology
    VS2013本地C++单元测试框架
    vs的环境变量
    利用rundll32执行程序的函数执行程序
    动态so注入
    ELF运行时注入
    MailKit系列之转发电子邮件
    WPF实战之一 桌面消息框(右下角消息弹出框)
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11245141.html
Copyright © 2011-2022 走看看