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

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

收藏
创意的热门院校专业气泡div布局
jQuery css3制作热门院校专业详情悬浮的气泡标签,悬停显示专业文字介绍内容。这是一款创意的图文ui动画布局。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 月晴
  • 上传时间 6年前

使用方法:

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>
<!--学历提升优势结束-->

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。