JAVA、PHP、前端、APP、网站开发 - 开发技术学习

开发技术学习 » 前端设计 » jquery浮动导航条的拖动与展开收缩,jquery页面拖动

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

此文被围观2962日期: 2014-06-22 分类 : 前端设计  标签:  ·····

今天在网站上的一个广告网站看到的一jquery特效,感觉不错,也许以后有用,就记录了下来!

jquery特效

正常情况下: 


访问情况:


拖动了一下:



//浮动导航条的拖动与展开收缩
$(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 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号