创意的热门院校专业气泡div布局

jQuery css3制作热门院校专业详情悬浮的气泡标签，悬停显示专业文字介绍内容。这是一款创意的图文ui动画布局。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

使用方法：

1、head引入css文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

2、head引入js文件

<script src="js/jquery.min.js"></script>

3、body引入部分

<!--学历提升优势开始-->
<div class="superiority">
	<div class="title">
			<h4>热门院校专业详情</h4>
		</div>
	<div class="super_text">
 
        <div class="super_content">
        	<div class="superli">
            	<ul>
                	<li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>行政<br/>管理</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>法律</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>计算机<br/>管理</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a >市场<br/>营销</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>商务<br/>管理</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a >工商<br/>管理</a></li>
                </ul>
            </div>
            <div class="supertext">
            	<div class="supert"><p>相对其他专业通过率较高,简单好考，管理岗位必修课程，就业面广,专本连读少花一半精力</p></div>
                <div class="supert"><p>工作稳定，就业机会多,晋升路线清晰，越老越吃香薪酬可观，职业地位高</p></div>
                <div class="supert"><p>薪资较高, 职业发展比较可控, 岗位选择性多</p></div>
                <div class="supert"><p>考试科目少，适合上班族,没有数理科目，简单好学，考证快,万金油专业，对口各大主流行业</p></div>
                <div class="supert"><p>职业地位高，实用性强，通过率高，简单好学习，公务员对口。</p></div>
                <div class="supert"><p>实用性强，简单好学，考证快考试科目少，适合上班族</p></div>
            </div>
         <div class="superbut">
            	<div class="superbtn" onClick="interactive.openGreatBear('0', '')" ><a>一键获取学历提升方案</a></div>
            </div>
        </div>
		
    </div>
	   
</div>
	

<div class="imgWrap_k">
	<div class="imgWrap">
		<div class="outer"></div>
		<div class="inner"></div>
		<div class="small"></div>
		<span class="img"></span>
	</div>
</div>
	

<script type="text/javascript">
$(function(){
	$(".superli ul li").mouseover(function(){
		$(this).addClass('superhover').siblings().removeClass('superhover');
		var index = $(this).index();
		number = index;
		$('.supert').hide();
		$('.supert:eq('+index+')').show();
	});
	
	var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
	if(auto ==1){
		var number = 0;
		var maxNumber = $('.superli ul li').length;
		function autotab(){
			number++;
			number == maxNumber? number = 0 : number;
			$('.superli ul li:eq('+number+')').addClass('superhover').siblings().removeClass('superhover');
			$('.supert:eq('+number+')').show().siblings().hide();
		}
		var tabChange = setInterval(autotab,3000);
		//鼠标悬停暂停切换
		$('.superli').mouseover(function(){
			clearInterval(tabChange);
		});
		$('.superli').mouseout(function(){
			tabChange = setInterval(autotab,3000);
		});
	  }
});	
</script>
<!--学历提升优势结束-->

文件目录

本资源来自：代码 » CSS3实例 » 创意的热门院校专业气泡div布局

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！