效果图
我要评论<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/jquery.superslide.2.1.1.js"></script>
</head>
<body>
<div class="bgfff banner-box">
<div class="g-banner pr">
<div class="menuwrap"></div>
<!-- 二级导航 -->
<div class="submenu a hide" data-id="a" style="display: none;">
<div class="innerbox clearfix">
<div class="subinnerbox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">前沿技术</span>
</div>
<div class="tag-box l">
<a href="#">微服务</a>
<a href="#">区块链</a>
<a href="#">以太坊</a>
<a href="#">人工智能</a>
<a href="#">机器学习</a>
<a href="#">深度学习</a>
<a href="#">计算机视觉</a>
<a href="#">数据分析&挖掘</a>
</div>
</div>
</div>
</div>
</div>
<!-- 二级导航广告区 -->
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" title="区块链入门与去中心化应用实战" class="clearfix">
<img src="images/b1.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">区块链入门与去中心化应用实战</h3>
<div class="course-card-price l">
￥199.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>509
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="区块链技术核心概念与原理讲解" class="clearfix">
<img src="images/b2.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">区块链技术核心概念与原理讲解</h3>
<div class="course-card-info l">
入门
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>20167
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="基于python玩转人工智能最火框架 tensorflow应用实践" class="clearfix">
<img src="images/b3.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">基于python玩转人工智能最火框架 tensorflow应用实践</h3>
<div class="course-card-price l">
￥299.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1186
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="python人工智能常用库numpy使用入门" class="clearfix">
<img src="images/b4.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">python人工智能常用库numpy使用入门</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>20040
</div>
</div>
</a>
</div>
</div>
</div>
<!-- 二级导航 -->
<div class="submenu b hide" style="display: none;">
<div class="innerbox clearfix">
<div class="subinnerbox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">前端开发</span>
</div>
<div class="tag-box l">
<a href="#">html/css</a>
<a href="#">javascript</a>
<a href="#">vue.js</a>
<a href="#">react.js</a>
<a href="#">angular</a>
<a href="#">node.js</a>
<a href="#">jquery</a>
<a href="#">bootstrap</a>
<a href="#">sass/less</a>
<a href="#">webapp</a>
<a href="#">前端工具</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" title="html5与css3实现动态网页" class="clearfix">
<img src="images/b1.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">html5与css3实现动态网页</h3>
<div class="course-card-price l">
￥628.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
5步／29课
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1818
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="微信小程序入门与实战 常用组件api开发技巧项目实战" class="clearfix">
<img src="images/b2.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">微信小程序入门与实战 常用组件api开发技巧项目实战</h3>
<div class="course-card-price l">
￥149.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>13621
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="揭秘一线互联网企业 前端javascript高级面试" class="clearfix">
<img src="images/b3.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">揭秘一线互联网企业 前端javascript高级面试</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
高级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>548
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="前端javascript面试技巧" class="clearfix">
<img src="images/b4.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">前端javascript面试技巧</h3>
<div class="course-card-price l">
￥149.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>2706
</div>
</div>
</a>
</div>
</div>
</div>
<!-- 二级导航 -->
<div class="submenu c hide" style="display: none;">
<div class="innerbox clearfix">
<div class="subinnerbox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">后端开发</span>
</div>
<div class="tag-box l">
<a href="#">java</a>
<a href="#">springboot</a>
<a href="#">python</a>
<a href="#">爬虫</a>
<a href="#">django</a>
<a href="#">go</a>
<a href="#">php</a>
<a href="#">c</a>
<a href="#">c++</a>
<a href="#">c#</a>
<a href="#">ruby</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" title="c++零基础入门 热门编程语言 二级考试必备" class="clearfix">
<img src="images/b1.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">c++零基础入门 热门编程语言 二级考试必备</h3>
<div class="course-card-price l">
￥428.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
3步／34课
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>385
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="java并发编程与高并发解决方案" class="clearfix">
<img src="images/b2.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">java并发编程与高并发解决方案</h3>
<div class="course-card-price l">
￥299.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>2001
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="全网最热python3入门+进阶 更快上手实际开发" class="clearfix">
<img src="images/b3.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">全网最热python3入门+进阶 更快上手实际开发</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>5138
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="最火python3 玩转实用小工具" class="clearfix">
<img src="images/b4.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">最火python3 玩转实用小工具</h3>
<div class="course-card-price l">
￥166.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>87
</div>
</div>
</a>
</div>
</div>
</div>
<!-- 二级导航 -->
<div class="submenu d hide" style="display: none;">
<div class="innerbox clearfix">
<div class="subinnerbox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">移动开发</span>
</div>
<div class="tag-box l">
<a href="#">android</a>
<a href="#">ios</a>
<a href="#">react native</a>
<a href="#">weex</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" title="零基础入门android语法与界面" class="clearfix">
<img src="images/b1.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">零基础入门android语法与界面</h3>
<div class="course-card-price l">
￥499.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
5步／43课
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1984
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="新浪微博资深大牛全方位剖析 ios 高级面试" class="clearfix">
<img src="images/b2.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">新浪微博资深大牛全方位剖析 ios 高级面试</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
高级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>376
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="bat大咖助力 全面升级android面试" class="clearfix">
<img src="images/b3.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">bat大咖助力 全面升级android面试</h3>
<div class="course-card-price l">
￥288.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>3013
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="android通用框架设计与完整电商app开发" class="clearfix">
<img src="images/b4.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">android通用框架设计与完整电商app开发</h3>
<div class="course-card-price l">
￥348.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
高级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1374
</div>
</div>
</a>
</div>
</div>
</div>
<!-- 二级导航 -->
<div class="submenu e hide" style="display: none;">
<div class="innerbox clearfix">
<div class="subinnerbox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">算法&数学</span>
</div>
<div class="tag-box l">
<a href="#">算法与数据结构</a>
<a href="#">数学</a>
</div>
</div>
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">云计算&大数据</span>
</div>
<div class="tag-box l">
<a href="#">大数据</a>
<a href="#">hadoop</a>
<a href="#">spark</a>
<a href="#">hbase</a>
<a href="#">storm</a>
<a href="#">云计算</a>
<a href="#">aws</a>
<a href="#">docker</a>
<a href="#">kubernetes</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" title="以日志分析为例 进入大数据 spark sql 的世界" class="clearfix">
<img src="images/b1.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">以日志分析为例 进入大数据 spark sql 的世界</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>973
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="轻松愉快之玩转springdata" class="clearfix">
<img src="images/b2.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">轻松愉快之玩转springdata</h3>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>22935
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="系统学习docker 践行devops理念" class="clearfix">
<img src="images/b3.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">系统学习docker 践行devops理念</h3>
<div class="course-card-price l">
￥299.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>695
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="hbase入门" class="clearfix">
<img src="images/b4.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">hbase入门</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>16656
</div>
</div>
</a>
</div>
</div>
</div>
<!-- 二级导航 -->
<div class="submenu f hide" style="display: none;">
<div class="innerbox clearfix">
<div class="subinnerbox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">运维&测试</span>
</div>
<div class="tag-box l">
<a href="#">运维</a>
<a href="#">自动化运维</a>
<a href="#">linux</a>
<a href="#">测试</a>
<a href="#">功能测试</a>
<a href="#">性能测试</a>
<a href="#">自动化测试</a>
<a href="#">接口测试</a>
<a href="#">安全测试</a>
</div>
</div>
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">数据库</span>
</div>
<div class="tag-box l">
<a href="#">mysql</a>
<a href="#">redis</a>
<a href="#">mongodb</a>
<a href="#">oracle</a>
<a href="#">sql server</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" title="阿里大牛亲授 阿里云主机(ecs)与centos7实战" class="clearfix">
<img src="images/b1.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">阿里大牛亲授 阿里云主机(ecs)与centos7实战</h3>
<div class="course-card-price l">
￥288.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>89
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="使用java构建和维护接口自动化测试框架" class="clearfix">
<img src="images/b2.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">使用java构建和维护接口自动化测试框架</h3>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>18429
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="web自动化测试 selenium基础到企业应用" class="clearfix">
<img src="images/b3.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">web自动化测试 selenium基础到企业应用</h3>
<div class="course-card-price l">
￥266.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>862
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="linux系统管理" class="clearfix">
<img src="images/b4.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">linux系统管理</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>60326
</div>
</div>
</a>
</div>
</div>
</div>
<!-- 二级导航 -->
<div class="submenu g hide" style="display: none;">
<div class="innerbox clearfix">
<div class="subinnerbox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">ui设计</span>
</div>
<div class="tag-box l">
<a href="#">模型制作</a>
<a href="#">动效动画</a>
<a href="#">设计基础</a>
<a href="#">设计工具</a>
<a href="#">appui设计</a>
<a href="#">产品交互</a>
</div>
</div>
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">游戏</span>
</div>
<div class="tag-box l">
<a href="#">unity 3d</a>
<a href="#">cocos2d-x</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" title="移动端app ui 设计入门与实战" class="clearfix">
<img src="images/b1.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">移动端app ui 设计入门与实战</h3>
<div class="course-card-price l">
￥199.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>321
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="高薪设计师必修课 ae移动ui动效设计从入门到实战" class="clearfix">
<img src="images/b2.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">高薪设计师必修课 ae移动ui动效设计从入门到实战</h3>
<div class="course-card-price l">
￥199.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>83
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="axure入门初体验" class="clearfix">
<img src="images/b3.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">axure入门初体验</h3>
<div class="course-card-info l">
入门
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>44228
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" title="前端工程师必备的ps技能——切图篇" class="clearfix">
<img src="images/b4.png" class="l">
<div class="l course-card">
<h3 class="course-card-name">前端工程师必备的ps技能——切图篇</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>228410
</div>
</div>
</a>
</div>
</div>
</div>
<!-- 一级导航 -->
<div class="menucontent">
<div class="item">
<a href="#">
<span class="group">前沿 / 区块链 / 人工智能</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">前端 / 小程序 / js</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">后端 / java / python</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">移动 / android / ios</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">云计算 / 大数据 / 容器</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">运维 / 测试 / 数据库</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">ui设计 / 3d动画 / 游戏</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
</div>
<script>
//导航
//建议在div结束后立刻调用 superslide，这样会得到最好的效果，避免整个页面加载后再调用 superslide
jquery(".g-banner").slide({
titcell:".item", //鼠标触发对象
targetcell:".submenu", //titcell里面包含的要显示/消失的对象
delaytime:100, //效果时间
defaultplay:false,
triggertime:0, //鼠标延迟触发时间（默认150）
returndefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false）
});
</script>
<!-- 轮播图 -->
<div class="g-banner-content">
<!-- 轮播图幻灯片 -->
<div class="g-banner-box">
<div class="banner-slide">
<ul>
<li><a href="#"><img src="images/b1.png"></a></li>
<li><a href="#"><img src="images/b2.png"></a></li>
<li><a href="#"><img src="images/b3.png"></a></li>
<li><a href="#"><img src="images/b4.png"></a></li>
</ul>
</div>
<div class="banner-dots">
<ul class="dian">
<li class=""></li><li class=""></li><li class=""></li><li class=""></li>
</ul>
</div>
<a href="javascript:void(0)" class="banner-anchor prev icon-left2"></a>
<a href="javascript:void(0)" class="banner-anchor next icon-right2"></a>
<div class="cb"></div>
</div>
<script>
//轮播图
jquery(".g-banner-box").slide({
titcell:".banner-dots ul li",
maincell:".banner-slide ul",
autoplay:true,
delaytime:0,
});
</script>
<!-- 轮播图下方广告区 -->
<div class="path-banner clearfix">
<a href="#">
<i class="i-web"></i>
<p class="tit">web前端攻城狮</p>
<p class="desc">互联网时代最火爆的技术</p>
</a>
<a href="#">
<i class="i-java"></i>
<p class="tit">java攻城狮</p>
<p class="desc">综合就业排名第一</p>
</a>
<a href="#">
<i class="i-android"></i>
<p class="tit">android攻城狮</p>
<p class="desc">移动设备市场份额第一</p>
</a>
<a href="#">
<i class="i-php"></i>
<p class="tit">php攻城狮</p>
<p class="desc">世界上最好的语言：）</p>
</a>
<a href="#">
<i class="i-ios"></i>
<p class="tit">ios攻城狮</p>
<p class="desc">可能是全球最好用的系统</p>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
body,html {
font:14px/1.5 "pingfang sc","microsoft yahei",helvetica,"helvetica neue",tahoma,arial,sans-serif
}
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
a {
text-decoration:none;
color:#000
}
img {
border:0
}
body {
background:#fff;
color:#666
}
html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,blockquote,pre,button,fieldset,form,input,legend,textarea,th,td {
margin:0;
padding:0
}
a {
text-decoration:none;
color:#08acee
}
button {
outline:0
}
img {
border:0
}
button,input,optgroup,select,textarea {
margin:0;
font:inherit;
color:inherit;
outline:none
}
li {
list-style:none
}
a {
color:#666
}
a:hover {
color:#eee
}
.clearfix::after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden
}
.clearfix {
}body .bk {
width:100%;
height:490px;
position:absolute;
top:0;
transition:all .3s
}
body .bk {
height:180px;
opacity:.3;
-webkit-filter:blur(100px);
-moz-filter:blur(100px);
-o-filter:blur(100px);
-ms-filter:blur(100px);
filter:blur(100px);
filter:progid:dximagetransform.microsoft.blur(pixelradius='100')
}
body .bk,div {
background-size:cover
}
.banner-box {
padding-top:32px
}
.g-banner {
position:relative;
height:444px;
overflow:hidden;
width:1152px;
margin:auto;
background-color:#fff;
border-radius:8px
}
.g-banner .g-banner-content {
position:relative;
float:left;
width:936px
}
.g-banner .g-banner-content .g-banner-box {
position:relative;
height:316px;
width:936px
}
.g-banner .banner-anchor {
position:absolute;
top:50%;
margin-top:-30px;
width:36px;
height:60px;
overflow:hidden;
font-size:24px;
color:rgba(255,255,255,.6);
text-align:center;
line-height:60px;
text-shadow:0 2px 4px rgba(7,17,27,.6)
}
.g-banner .next {
right:0;
border-radius:4px 0 0 4px
}
.g-banner .prev {
left:0;
border-radius:0 4px 4px 0
}
.g-banner .next:hover,.g-banner .prev:hover {
color:#fff;
background:rgba(7,17,27,.6)
}
.g-banner .g-banner-box>a:first-child .banner-slide {
display:block
}
.g-banner .banner-slide {
position:relative;
height:100%;
z-index:0
}
.g-banner .banner-slide img {
height:316px;
width:936px
}
.g-banner .inner {
position:relative;
width:1200px;
margin:0 auto
}
.g-banner .banner-dots {
position:absolute;
bottom:20px;
left:0;
right:0;
text-align:right;
padding-right:24px;
line-height:12px
}
.g-banner .banner-dots li {
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
margin-left:8px;
background:rgba(7,17,27,.8);
border:1px solid rgba(255,255,255,.6);
transition:transform .2s;
cursor:pointer
}
.g-banner .banner-dots li.on {
background:#fff;
border:1px solid rgba(7,17,27,.4)
}
.menuwrap,.submenu {
position:absolute;
top:0;
height:444px
}
.menuwrap {
background-color:rgba(7,17,27,.5);
opacity:.502;
left:0;
width:216px;
z-index:1
}
.submenu {
background:#fff;
left:216px;
width:768px;
z-index:581;
box-shadow:0 4px 8px 0 rgba(0,0,0,.1)
}
.submenu .subinnerbox {
overflow:hidden
}
.submenu .banner-line {
position:relative;
height:1px;
margin:35px 0 23px;
background-color:rgba(77,85,93,.08)
}
.submenu .banner-line span {
position:absolute;
top:-12px;
left:0;
padding-right:12px;
font-size:14px;
font-weight:700;
color:#f20d0d;
line-height:24px;
background-color:#fff
}
.submenu .tag-box {
font-size:0
}
.submenu .tag-box a {
margin-bottom:16px;
font-size:14px;
color:#4d555d;
line-height:22px;
margin-right:24px;
display:inline-block
}
.submenu .tag-box a:last-child {
margin-right:0
}
.submenu .subinnerbox .title {
color:#07111b;
font-size:16px;
line-height:16px;
margin-top:32px;
font-weight:700;
margin-bottom:13px
}
.submenu .subinnerbox .recommend {
margin-top:33px;
margin-bottom:16px
}
.submenu a:hover {
color:#f01414!important
}
.submenu .subinnerbox .title a:hover {
color:#f01414
}
.menucontent {
position:relative;
float:left;
width:216px;
height:444px;
z-index:2;
padding-top:12px;
background:#2b333b;
border-bottom-left-radius:4px;
font-weight:400
}
.menucontent .item .box a:hover {
color:#f01414!important
}
.menucontent .item {
height:60px;
line-height:60px;
font-size:12px;
cursor:pointer;
padding-left:12px;
position:relative
}
.menucontent .item>a {
display:block;
color:rgba(255,255,255,.6);
padding:0 16px;
border-top-left-radius:4px;
border-bottom-left-radius:4px;
height:60px;
transition:all .1s
}
.menucontent .item i {
position:absolute;
right:8px;
top:21px;
color:rgba(255,255,255,.5);
font-size:16px
}
.menucontent .item .box a {
color:#fff!important
}
.menucontent .on a {
color:#fff;
background-color:rgba(255,255,255,.3)
}
.g-banner {
background-color:#93999f;
box-shadow:0 12px 24px 0 rgba(7,17,27,.2)
}
.path-banner {
width:936px;
height:128px;
overflow:hidden;
box-shadow:0 4px 8px 0 rgba(7,17,27,.1);
background-color:#fff;
text-align:center;
padding:0 18px
}
.path-banner i {
display:inline-block;
width:36px;
height:36px;
background:url(../images/path_new.png) no-repeat;
background-size:100%;
margin-top:22px
}
.container-types .wonderful-list .wenda-tit,.path-banner>a {
display:block;
transition:all .3s
}
.path-banner .i-web {
background-position:center 0
}
.path-banner .i-php {
background-position:center -36px
}
.path-banner .i-java {
background-position:center -72px
}
.path-banner .i-android {
background-position:center -108px
}
.path-banner .i-ios {
background-position:center -144px
}
.path-banner>a {
float:left;
font-size:0;
width:180px;
height:128px;
overflow:hidden
}
.path-banner>a:hover {
margin-top:-4px
}
.path-banner .tit {
font-size:14px;
color:#07111b;
letter-spacing:1px;
margin-top:4px
}
.path-banner .desc {
font-size:12px;
color:#93999f;
line-height:16px;
margin-top:2px;
font-weight:400
}
.submenu .innerbox {
background-color:#fff;
padding:12px 48px 32px;
position:relative;
min-height:150px
}
.submenu .innerbox .bkimg {
position:absolute;
bottom:0;
right:-1px
}
.recomment-box {
position:absolute;
bottom:0;
background:#f8fafc;
padding:36px 0 0 48px
}
.recomment-box a {
display:block;
width:100%;
height:100%
}
.recomment-box .adsense-box {
width:312px;
height:64px;
background-color:#ccc;
border-radius:4px;
margin-right:48px
}
.recomment-box .banner-course-card {
width:312px;
height:60px;
margin-right:48px;
margin-bottom:36px
}
.recomment-box .banner-course-card img {
width:64px;
height:42px;
border-radius:4px;
background-color:#ccc
}
.recomment-box .banner-course-card .course-card {
margin-left:16px
}
.recomment-box .banner-course-card .course-card-name {
width:232px;
font-size:12px;
color:#07111b;
line-height:20px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.recomment-box .banner-course-card .course-card-info,.recomment-box .banner-course-card .course-card-price {
font-size:12px;
color:#4d555d;
line-height:20px
}
.recomment-box .banner-course-card .course-card-info span {
margin-right:12px
}
.recomment-box .banner-course-card .course-card-price.sales {
color:#f01414
}
.recomment-box .banner-course-card .course-card-price.studentsales .sales-tip {
padding:0;
border:0
}
.l {
float:left
}
@font-face {
font-family:imv2;
src:url(../font/imv2.eot?elwc2w);
src:url(../font/imv2.eot?elwc2w#iefix) format('embedded-opentype'),
url(../font/imv2.ttf?elwc2w) format('truetype'),
url(../font/imv2.woff?elwc2w) format('woff'),
url(../font/imv2.svg?elwc2w#imv2) format('svg');
font-weight:400;
font-style:normal
}
[class*=" imv2-"],[class^=imv2-] {
font-family:imv2!important;
speak:none;
font-style:normal;
font-weight:400;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.imv2-arrow1_r:before {
content:"\e5cb"
}
@font-face {
font-family:icomoon;
src:url(../font/icomoon.eot?d8493nx);
src:url(../font/icomoon.eot?d8493nx#iefix) format('embedded-opentype'),
url(../font/icomoon.ttf?d8493nx) format('truetype'),
url(../font/icomoon.woff?d8493nx) format('woff'),
url(../font/icomoon.svg?d8493nx#icomoon) format('svg');
font-weight:400;
font-style:normal
}
[class*=" icon-"],[class^=icon-] {
font-family:icomoon!important;
speak:none;
font-style:normal;
font-weight:400;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.icon-left2:before {
content:"\e913"
}
.icon-right2:before {
content:"\e914"
}
jquery.superslide.2.1.1.js
/*!
* superslide v2.1.1
* 杞绘澗瑙ｅ喅缃戠珯澶ч儴鍒嗙壒鏁堝睍绀洪棶棰�
* 璇﹀敖淇℃伅璇风湅瀹樼綉锛歨ttp://www.superslide2.com/
*
* copyright 2011-2013, 澶ц瘽涓诲腑
*
* 璇峰皧閲嶅師鍒涳紝淇濈暀澶撮儴鐗堟潈
* 鍦ㄤ繚鐣欑増鏉冪殑鍓嶆彁涓嬪彲搴旂敤浜庝釜浜烘垨鍟嗕笟鐢ㄩ€�
* v2.1.1锛氫慨澶嶅綋璋冪敤澶氫釜superslide锛屽苟璁剧疆returndefault:true 鏃惰繑鍥瀌efaultindex绱㈠紩閿欒
*/!function(a){a.fn.slide=function(b){return a.fn.slide.defaults={type:"slide",effect:"fade",autoplay:!1,delaytime:500,intertime:2500,triggertime:150,defaultindex:0,titcell:".hd li",maincell:".bd",targetcell:null,trigger:"mouseover",scroll:1,vis:1,titonclassname:"on",autopage:!1,prevcell:".prev",nextcell:".next",pagestatecell:".pagestate",opp:!1,pnloop:!0,easing:"swing",startfun:null,endfun:null,switchload:null,playstatecell:".playstate",mouseoverstop:!0,defaultplay:!0,returndefault:!1},this.each(function(){var c=a.extend({},a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevcell,d),g=a(c.nextcell,d),h=a(c.pagestatecell,d),i=a(c.playstatecell,d),j=a(c.titcell,d),k=j.size(),l=a(c.maincell,d),m=l.children().size(),n=c.switchload,o=a(c.targetcell,d),p=parseint(c.defaultindex),q=parseint(c.delaytime),r=parseint(c.intertime);parseint(c.triggertime);var q,t=parseint(c.scroll),u=parseint(c.vis),v="false"==c.autoplay||0==c.autoplay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autopage||0==c.autopage?!1:!0,y="false"==c.pnloop||0==c.pnloop?!1:!0,z="false"==c.mouseoverstop||0==c.mouseoverstop?!1:!0,a="false"==c.defaultplay||0==c.defaultplay?!1:!0,b="false"==c.returndefault||0==c.returndefault?!1:!0,c=0,d=0,e=0,f=0,g=c.easing,h=null,i=null,j=null,k=c.titonclassname,l=j.index(d.find("."+k)),m=p=-1==l?p:l,n=p,o=p,p=m>=u?0!=m%t?m%t:t:0,r="leftmarquee"==e||"topmarquee"==e?!0:!1,s=function(){a.isfunction(c.startfun)&&c.startfun(p,k,d,a(c.titcell,d),l,o,f,g)},t=function(){a.isfunction(c.endfun)&&c.endfun(p,k,d,a(c.titcell,d),l,o,f,g)},u=function(){j.removeclass(k),a&&j.eq(n).addclass(k)};if("menu"==c.type)return a&&j.removeclass(k).eq(p).addclass(k),j.hover(function(){q=a(this).find(c.targetcell);var b=j.index(a(this));i=settimeout(function(){switch(p=b,j.removeclass(k).eq(p).addclass(k),s(),e){case"fade":q.stop(!0,!0).animate({opacity:"show"},q,g,t);break;case"slidedown":q.stop(!0,!0).animate({height:"show"},q,g,t)}},c.triggertime)},function(){switch(cleartimeout(i),e){case"fade":q.animate({opacity:"hide"},q,g);break;case"slidedown":q.animate({height:"hide"},q,g)}}),b&&d.hover(function(){cleartimeout(j)},function(){j=settimeout(u,q)}),void 0;if(0==k&&(k=m),r&&(k=2),x){if(m>=u)if("leftloop"==e||"toploop"==e)k=0!=m%t?(0^m/t)+1:m/t;else{var v=m-u;k=1+parseint(0!=v%t?v/t+1:v/t),0>=k&&(k=1)}else k=1;j.html("");var w="";if(1==c.autopage||"true"==c.autopage)for(var x=0;k>x;x++)w+="<li>"+(x+1)+"</li>";else for(var x=0;k>x;x++)w+=c.autopage.replace("$",x+1);j.html(w);var j=j.children()}if(m>=u){l.children().each(function(){a(this).width()>e&&(e=a(this).width(),d=a(this).outerwidth(!0)),a(this).height()>f&&(f=a(this).height(),c=a(this).outerheight(!0))});var y=l.children(),z=function(){for(var a=0;u>a;a++)y.eq(a).clone().addclass("clone").appendto(l);for(var a=0;p>a;a++)y.eq(m-a-1).clone().addclass("clone").prependto(l)};switch(e){case"fold":l.css({position:"relative",width:d,height:c}).children().css({position:"absolute",width:e,left:0,top:0,display:"none"});break;case"top":l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; height:'+u*c+'px"></div>').css({top:-(p*t)*c,position:"relative",padding:"0",margin:"0"}).children().css({height:f});break;case"left":l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; width:'+u*d+'px"></div>').css({width:m*d,left:-(p*t)*d,position:"relative",overflow:"hidden",padding:"0",margin:"0"}).children().css({"float":"left",width:e});break;case"leftloop":case"leftmarquee":z(),l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; width:'+u*d+'px"></div>').css({width:(m+u+p)*d,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(p+p*t)*d}).children().css({"float":"left",width:e});break;case"toploop":case"topmarquee":z(),l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; height:'+u*c+'px"></div>').css({height:(m+u+p)*c,position:"relative",padding:"0",margin:"0",top:-(p+p*t)*c}).children().css({height:f})}}var $=function(a){var b=a*t;return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b},_=function(b){var c=function(c){for(var d=c;u+c>d;d++)b.eq(d).find("img["+n+"]").each(function(){var b=a(this);if(b.attr("src",b.attr(n)).removeattr(n),l.find(".clone")[0])for(var c=l.children(),d=0;d<c.size();d++)c.eq(d).find("img["+n+"]").each(function(){a(this).attr(n)==b.attr("src")&&a(this).attr("src",a(this).attr(n)).removeattr(n)})})};switch(e){case"fade":case"fold":case"top":case"left":case"slidedown":c(p*t);break;case"leftloop":case"toploop":c(p+$(o));break;case"leftmarquee":case"topmarquee":var d="leftmarquee"==e?l.css("left").replace("px",""):l.css("top").replace("px",""),f="leftmarquee"==e?d:c,g=p;if(0!=d%f){var h=math.abs(0^d/f);g=1==p?p+h:p+h-1}c(g)}},ab=function(a){if(!a||m!=p||a||r){if(r?p>=1?p=1:0>=p&&(p=0):(o=p,p>=k?p=0:0>p&&(p=k-1)),s(),null!=n&&_(l.children()),o[0]&&(q=o.eq(p),null!=n&&_(o),"slidedown"==e?(o.not(q).stop(!0,!0).slideup(q),q.slidedown(q,g,function(){l[0]||t()})):(o.not(q).stop(!0,!0).hide(),q.animate({opacity:"show"},q,function(){l[0]||t()}))),m>=u)switch(e){case"fade":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,g,function(){t()}).siblings().hide();break;case"fold":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,g,function(){t()}).siblings().animate({opacity:"hide"},q,g);break;case"top":l.stop(!0,!1).animate({top:-p*t*c},q,g,function(){t()});break;case"left":l.stop(!0,!1).animate({left:-p*t*d},q,g,function(){t()});break;case"leftloop":var b=o;l.stop(!0,!0).animate({left:-($(o)+p)*d},q,g,function(){-1>=b?l.css("left",-(p+(k-1)*t)*d):b>=k&&l.css("left",-p*d),t()});break;case"toploop":var b=o;l.stop(!0,!0).animate({top:-($(o)+p)*c},q,g,function(){-1>=b?l.css("top",-(p+(k-1)*t)*c):b>=k&&l.css("top",-p*c),t()});break;case"leftmarquee":var c=l.css("left").replace("px","");0==p?l.animate({left:++c},0,function(){l.css("left").replace("px","")>=0&&l.css("left",-m*d)}):l.animate({left:--c},0,function(){l.css("left").replace("px","")<=-(m+p)*d&&l.css("left",-p*d)});break;case"topmarquee":var d=l.css("top").replace("px","");0==p?l.animate({top:++d},0,function(){l.css("top").replace("px","")>=0&&l.css("top",-m*c)}):l.animate({top:--d},0,function(){l.css("top").replace("px","")<=-(m+p)*c&&l.css("top",-p*c)})}j.removeclass(k).eq(p).addclass(k),m=p,y||(g.removeclass("nextstop"),f.removeclass("prevstop"),0==p&&f.addclass("prevstop"),p==k-1&&g.addclass("nextstop")),h.html("<span>"+(p+1)+"</span>/"+k)}};a&&ab(!0),b&&d.hover(function(){cleartimeout(j)},function(){j=settimeout(function(){p=n,a?ab():"slidedown"==e?q.slideup(q,u):q.animate({opacity:"hide"},q,u),m=p},300)});var bb=function(a){h=setinterval(function(){w?p--:p++,ab()},a?a:r)},cb=function(a){h=setinterval(ab,a?a:r)},db=function(){z||(clearinterval(h),bb())},eb=function(){(y||p!=k-1)&&(p++,ab(),r||db())},fb=function(){(y||0!=p)&&(p--,ab(),r||db())},gb=function(){clearinterval(h),r?cb():bb(),i.removeclass("pausestate")},hb=function(){clearinterval(h),i.addclass("pausestate")};if(v?r?(w?p--:p++,cb(),z&&l.hover(hb,gb)):(bb(),z&&d.hover(hb,gb)):(r&&(w?p--:p++),i.addclass("pausestate")),i.click(function(){i.hasclass("pausestate")?gb():hb()}),"mouseover"==c.trigger?j.hover(function(){var a=j.index(this);i=settimeout(function(){p=a,ab(),db()},c.triggertime)},function(){cleartimeout(i)}):j.click(function(){p=j.index(this),ab(),db()}),r){if(g.mousedown(eb),f.mousedown(fb),y){var ib,jb=function(){ib=settimeout(function(){clearinterval(h),cb(0^r/10)},150)},kb=function(){cleartimeout(ib),clearinterval(h),cb()};g.mousedown(jb),g.mouseup(kb),f.mousedown(jb),f.mouseup(kb)}"mouseover"==c.trigger&&(g.hover(eb,function(){}),f.hover(fb,function(){}))}else g.click(eb),f.click(fb)})}}(jquery),jquery.easing.jswing=jquery.easing.swing,jquery.extend(jquery.easing,{def:"easeoutquad",swing:function(a,b,c,d,e){return jquery.easing[jquery.easing.def](a,b,c,d,e)},easeinquad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeoutquad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeinoutquad:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},easeincubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeoutcubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeinoutcubic:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c},easeinquart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeoutquart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeinoutquart:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c},easeinquint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeoutquint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeinoutquint:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c},easeinsine:function(a,b,c,d,e){return-d*math.cos(b/e*(math.pi/2))+d+c},easeoutsine:function(a,b,c,d,e){return d*math.sin(b/e*(math.pi/2))+c},easeinoutsine:function(a,b,c,d,e){return-d/2*(math.cos(math.pi*b/e)-1)+c},easeinexpo:function(a,b,c,d,e){return 0==b?c:d*math.pow(2,10*(b/e-1))+c},easeoutexpo:function(a,b,c,d,e){return b==e?c+d:d*(-math.pow(2,-10*b/e)+1)+c},easeinoutexpo:function(a,b,c,d,e){return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*math.pow(2,10*(b-1))+c:d/2*(-math.pow(2,-10*--b)+2)+c},easeincirc:function(a,b,c,d,e){return-d*(math.sqrt(1-(b/=e)*b)-1)+c},easeoutcirc:function(a,b,c,d,e){return d*math.sqrt(1-(b=b/e-1)*b)+c},easeinoutcirc:function(a,b,c,d,e){return(b/=e/2)<1?-d/2*(math.sqrt(1-b*b)-1)+c:d/2*(math.sqrt(1-(b-=2)*b)+1)+c},easeinelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return-(h*math.pow(2,10*(b-=1))*math.sin((b*e-f)*2*math.pi/g))+c},easeoutelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return h*math.pow(2,-10*b)*math.sin((b*e-f)*2*math.pi/g)+d+c},easeinoutelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(2==(b/=e/2))return c+d;if(g||(g=e*.3*1.5),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return 1>b?-.5*h*math.pow(2,10*(b-=1))*math.sin((b*e-f)*2*math.pi/g)+c:.5*h*math.pow(2,-10*(b-=1))*math.sin((b*e-f)*2*math.pi/g)+d+c},easeinback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c},easeoutback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeinoutback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeinbounce:function(a,b,c,d,e){return d-jquery.easing.easeoutbounce(a,e-b,0,d,e)+c},easeoutbounce:function(a,b,c,d,e){return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c},easeinoutbounce:function(a,b,c,d,e){return e/2>b?.5*jquery.easing.easeinbounce(a,2*b,0,d,e)+c:.5*jquery.easing.easeoutbounce(a,2*b-e,0,d,e)+.5*d+c}});
图片素材如下
图标字体素材如下
如对本文有疑问， 点击进行留言回复！！
网友评论