JS如何实现DIV左边栏,默认隐藏被一个DIV点击后从左边平滑出现到右边,进 ...
发布网友
发布时间：2022-04-30 00:07
共1个回答
热心网友
时间：2022-04-22 16:59
给你写了一个， css随便写的， 具体你根据你的情况修改下即可！
yc.js
(function($) {$.fn.huadong = function( obj, obja, time ) {
this.height($(window).height()).css({'position':'absolute', 'top':'0px', 'left' : '0px'}); //首先把最外层的标签对象设置为浮动， 上边为0， 左边也为0
var left = $(obj).width(); //取得左边栏的宽度
$(obj).height($(window).height()).width(0).hide(); //将左边栏的高度设置为浏览器的高度， 宽度为0， 并隐藏掉！这样是为了页面载入的时候初始化
$(obja).click(function(){ //给触发按钮绑定点击事件，也就是鼠标点击触发按钮后执行的动作
$(obj).show().animate({'width':left + 'px'}, time); //把左边栏的宽度设置为原来的宽度并显示出来， 根据设定的时间慢慢展现
});
$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件
$(this).animate({'width':'0px'}, time, function(){ $(this).hide(); }); //又把左边栏的宽度设置为0， 并且隐藏
});
}
})(jQuery);
