基于jq的导航栏元素划入效果

最新推荐文章于 2024-09-01 12:23:47 发布

MoLvSHan

最新推荐文章于 2024-09-01 12:23:47 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 功能文章标签：插件 jq插件鼠标悬浮划入划入效果

本文链接：https://blog.youkuaiyun.com/MoLvSHan/article/details/77045392

功能同时被 2 个专栏收录

16 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的悬停显示二级菜单插件。当鼠标悬停在指定元素上时，会平滑地显示一个带有箭头指示的二级菜单。该插件通过扩展jQuery对象的方法来实现，并允许配置选项如菜单标题、跳转路径和显示速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个基于jQuery的插件开发，其效果如下图：

HTML代码：

<ul>
	<li class="li1">AAA</li>
	<li class="li2">BBB</li>
	<li class="li3">CCC</li>
	<li class="li4">DDD</li>
</ul>

CSS代码：

a{
	text-decoration: none;
}
ul{
	width: 60px;
	position: relative;
	left: 500px;
}
li{list-style-type: none;
	width: 100%;
	height: 35px;
	text-align: center;
	line-height: 35px;
	color: #fff;
	background: red;
	position: relative;
}
.cut_in_a{
	width: 80px;
	background: #494949;
	color: #fff;
	font-size: 12px;
}
.cut_in_a:after{
	content: '';
	width: 16px;
	height: 16px;
	display: block;
	background: #494949;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	right: -4px;
	transform: rotate(45deg);
}

js代码：

//鼠标悬浮某个元素后，划入一个二级元素块
(function($){
	$.fn.extend({
		'cutIn' : function(options){
			//title:划入块内容,path:划入块跳转路径,time:划入用时,right:以鼠标悬浮元素右侧为基线，划入块的位置
			var defaults = {
				title : '个人中心',
				path : 'javascript:void(0);',
				time : 1000,
				right : 1.2*$(this).width()
			};
			var opts = $.extend(defaults,options);
			//划入块元素a
			var str = '<a style="opacity:0;" class="cut_in_a" href="'+opts.path+'">'+opts.title+'</a>';
			$(this).mouseenter(function(){
				$(this).append(str);
				$('.cut_in_a').css({'position':'absolute','right':opts.right+'px','top':'0','display':'block'}).animate({
					right : $(this).width(),
					opacity : 1
				},opts.time);
			});
			//返回jq对象，以便可以链式调用
			return this;
		},
		'cutOut' : function(){
			$(this).mouseleave(function(){
				$(this).find('a').remove();
			});
			//返回jq对象，以便可以链式调用
			return this;
		}
	})
})(jQuery);

$('.li1').cutIn({title:'个人中心',path:'http://www.baidu.com',time:400}).cutOut().css('cursor','pointer');
$('.li2').cutIn({title:'购物车',path:'http://www.hmjshop.com',time:400}).cutOut().css('cursor','pointer');
$('.li3').cutIn({title:'我的收藏',path:'http://www.baidu.com',time:400}).cutOut().css('cursor','pointer');
$('.li4').cutIn({title:'我的订单',path:'http://www.hmjshop.com',time:400}).cutOut().css('cursor','pointer');