带箭头的滑动选项卡tab内容切换代码

来源:https://www.sucaihuo.com/js/1942.html 2017-05-15 18:28浏览(2159) 收藏

带箭头的tab内容切换代码,鼠标经过自动滑动选项卡,选项卡内显示多种格式的内容,图片、链接、甚至是视频都可以设置。
带箭头的滑动选项卡tab内容切换代码
分类:选项卡/滑动门 > 列表切换 难易:
查看演示 下载资源 下载积分: 30 积分

在style.css里面可以修改样式,增加多个<li>可以增加多个切换选项,部分JS代码如下:

$('.o-m .ul-o li').hover(function () {
	var linum = $(this).index()
	$('.o-m .ul-t li').eq(linum).stop().show().siblings().hide()
})
$(function () {
	var slip = $('.li-mask');
	var a = $('.o-m .ul-o li:first');
	//初始化滑块
	slip.css({
		'top': parseInt(a.position().top) + 'px'
	});
	$('.o-m .ul-o li').mouseenter(function () {
		//显示滑块
		if (slip.css('display') == 'none') {
			slip.show();
		};
		//移动滑块
		slip.stop().animate({
			top: parseInt($(this).position().top) + 'px'
		}, 300);
	});
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2