zoukankan      html  css  js  c++  java
  • 20150722---点击按钮使指定的控件可见部分平移(JS)

    前段代码:

        <div id="out"  style=" 400px;overflow:hidden;">
            <div id="int" style="white-space:nowrap;800px;">
                <asp:Label ID="lblTable" runat="server" Text="Label"></asp:Label>
            </div>
        </div>  
        <label onmousedown="marqueeById('l'),ShowLbl('lblRight')" id="lblLeft" onmouseup="marqueeStop()" style="visibility: hidden">&lt;&lt;&lt;&lt;</label>
        <label onmousedown="marqueeById('r'),ShowLbl('lblLeft')" id="lblRight" onmouseup="marqueeStop()" style="visibility: hidden">&gt;&gt;&gt;&gt;</label>

    注意:内层div宽度大于外层div,宽度的设定不仅局限于实际像素,也可使用百分比;js指向的的是外层div。外层div内部元素超出部分隐藏overflow:hidden,内层div的text不允许换行white-space:nowrap

    后台:

            protected void Page_Load(object sender, EventArgs e)
            {
                ShowMenu(20);
            }
            private void ShowMenu(int m)
            {
                string strTable = "";
                for (int i = 0; i <= m; i++)
                {
                    strTable += "<a href="# " class="nav" ><span>" + i + "</span></a>";
                }
                lblTable.Text = strTable;
            }

    注意:自动生成的菜单栏;

    JavaScript:

        var speed = 10; //数字越大速度越慢
        var getMoveId = document.getElementById("out");  //需要移动的控件ID
        var getIntId = document.getElementById("int");
        var getLeftId = document.getElementById("lblLeft");
        var getRightId = document.getElementById("lblRight");
        var myMark; //开关标记
        function marqueeById(direction) {
            direction == "r" ? moveRight() : moveLeft();
        }
        function marqueeStop() {
            clearInterval(myMark);
            if (getMoveId.scrollLeft == 0) {
                getLeftId.style.visibility = "hidden";
            }
            if (getMoveId.scrollLeft == (getIntId.offsetWidth - getMoveId.offsetWidth)) {
                getRightId.style.visibility = "hidden";
            }
        }
        function moveRight() {
            myMark = setInterval(function () { getMoveId.scrollLeft++ }, speed);
        }
        function moveLeft() {
            myMark = setInterval(function () { getMoveId.scrollLeft-- }, speed);
        }
        function ShowLbl(id) {
            var imgid = document.getElementById(id);
            if (imgid.style.visibility == "hidden") {
                imgid.style.visibility = "visible";
            }
        }
        function load() {
            if (getIntId.offsetWidth > getMoveId.offsetWidth) {
                getRightId.style.visibility = "visible";
            }
        }

    效果展示:

    image

    点击右侧箭头:

    image

    点击左侧:

    image

  • 相关阅读:
    用msi安装MySQL时MySQL Server组件不能安装,或安装失败
    在Django中连接MySQL数据库(Python3)
    2,简单的Python爬虫
    把自己的电脑做成服务器,并搭建自己的网站
    任务计划程序(让计算机自动执行程序)
    1,Python爬虫环境的安装
    response和request的区别以及常见问题解决
    Microsoft Visual Studio 2010 Service Pack 1 更新 (KB3002340)
    设置radiobutton 都不选中
    QQ邮件发送问题
  • 原文地址:https://www.cnblogs.com/Tirisfal/p/4667666.html
Copyright © 2011-2022 走看看