网络大杂烩首页

网络大杂烩

  • 网站首页
  • HTML/CSS
  • javascript
  • seo优化
  • PS美工
  • 系统安全
  • 漏洞预警
  • 编程学习
  • 原创专区
  • 【网络大杂烩】是一家综合技术门户,为您提供网站建设,编程开发,安全维护,漏洞预警等技术文章

    技术文章MAP

    文章

    jquery浮动导航条的拖动与展开收缩,jquery页面拖动效果大全

    日期:2019/12/12 14:28:02来源分类:javascript

    //浮动导航条的拖动与展开收缩
    $(function () {
        var box = $('.menu'),
        obj = box.children('span');
        obj.show();
        box.hover(function () {//鼠标移上去后出现选择菜单
            obj.stop(false, true).show(300);
        }, function () {
            obj.stop(false, true).hide(150);
        })
        var box = document.getElementById('menu');
        box.onmousedown = function (event) {
            var e = event || window.event,
            t = e.target || e.srcElement,
            x1 = e.clientX,
            y1 = e.clientY,
            dragLeft = this.offsetLeft,
            dragTop = this.offsetTop;
            document.onmousemove = function (event) {
                var e = event || window.event,
                t = e.target || e.srcElement,
                x2 = e.clientX,
                y2 = e.clientY,
                x = x2 - x1,
                y = y2 - y1;
                box.style.left = (dragLeft + x) + 'px';
                box.style.top = (dragTop + y) + 'px';
            }
            document.onmouseup = function () {
                this.onmousemove = null;
            }
        }
    })

    随机推荐

    • 该分类还没有添加任何内容!
    • 该分类还没有添加任何内容!

    Copyright 2005-2019 【网络大杂烩】 版权所有 黑ICP备16886888号

    声明:本站所有文章来自互联网 如有异议 请联系本站管理员