PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » jquery浮动导航条的拖动与展开收缩,jquery页面拖动

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

此文被围观1267日期: 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;
        }
    }
})

 

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.