利用jQuery实现招聘网站幻灯片动画特效



45 176 59



特效描述:利用jQuery实现 招聘网站 幻灯片 动画特效,利用jQuery实现招聘网站幻灯片动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="statics/assets/css/style.css">

2. 引入JS

<script src="statics/assets/js/jquery-1.9.1.min.js"></script>
<script src="statics/assets/js/sea.js"></script>
<script src="statics/assets/js/base.js"></script>

3. HTML代码

<div class="page page-index">
    <!-- logo -->
    <h1 class="index-logo icon-logo notext">51前端</h1>
    <!-- banner -->
    <div class="banner" id="banner">
        <div class="hd"><ul></ul></div>
        <div class="bd">
            <div class="bd-item bd-atmosphere">
                <div class="bd-inner wrapper">
                    <dl>
                        <dt class="name">快乐有爱的工作气氛</dt>
                        <dd class="text">让工作融入生活,成为充实有爱的生活方式!<br>51前端为与昂营造轻松有爱的工作氛围,并为此不断开阔思路,意在有爱的氛围中挖掘<br/>员工的潜能,并收获进步和成长。</dd>
                    </dl>
                    <ul class="beam beam-bot">
                        <li class="ani-beam1"></li>
                        <li class="ani-beam2"></li>
                        <li class="ani-beam3"></li>
                    </ul>
                    <ul class="beam beam-top">
                        <li class="ani-beam4"></li>
                        <li class="ani-beam5"></li>
                    </ul>
                    <ul class="dyeing">
                        <li class="ani-dyeing1"></li>
                        <li class="ani-dyeing2"></li>
                        <li class="ani-dyeing3"></li>
                        <li class="ani-dyeing4"></li>
                        <li class="ani-dyeing5"></li>
                    </ul>                  
                </div>
                <div class="bg" id="bannerBg"></div>
            </div>
            <div class="bd-item bd-outstanding">
                <div class="bd-inner wrapper">
                    <dl>
                        <dt class="name"><b>为</b>工作出色</dt>
                        <dd class="text">51前端,是可以让你看到梦想曙光的地方。<br>当我们回顾追梦的过程,回忆自己努力为梦想努力工作时,留下的每一步脚印,<br>会让我们感到欣喜,这是一种向别人证明我能行的满足。</dd>
                    </dl>
                    <!-- 三角形背景 -->
                    <div class="triangle-bg ani-triangle"></div>
                    <!-- 三角形 -->
                    <ul class="triangle-box">
                        <li class="ani ani-triangle1"></li>
                        <li class="ani ani-triangle2"></li>
                        <li class="ani ani-triangle3"></li>
                        <li class="ani ani-triangle4"></li>
                        <li class="ani ani-triangle5"></li>
                        <li class="ani ani-triangle6"></li>
                        <li class="ani ani-triangle7"></li>
                    </ul>
                    <!-- 立体三角形 -->
                    <ul class="polyhedron polyhedron-green">
                        <li class="polyhedron-item polyhedron-item1"></li>
                        <li class="polyhedron-item polyhedron-item2"></li>
                        <li class="polyhedron-item polyhedron-item3"></li>
                        <li class="polyhedron-item polyhedron-item4"></li>
                    </ul>
                    <ul class="polyhedron polyhedron-purple">
                        <li class="polyhedron-item polyhedron-item1"></li>
                        <li class="polyhedron-item polyhedron-item2"></li>
                        <li class="polyhedron-item polyhedron-item3"></li>
                        <li class="polyhedron-item polyhedron-item4"></li>
                    </ul>
                    <ul class="polyhedron polyhedron-blue">
                        <li class="polyhedron-item polyhedron-item1"></li>
                        <li class="polyhedron-item polyhedron-item2"></li>
                        <li class="polyhedron-item polyhedron-item3"></li>
                        <li class="polyhedron-item polyhedron-item4"></li>
                    </ul>
                </div>    
                <div class="line line-bot ani-line1"></div>
                <div class="line line-top ani-line2"></div>            
            </div>
            <div class="bd-item bd-inspiration">
                <div class="bd-inner wrapper">
                    <dl>
                        <dt class="name"><b>灵感</b>不间断</dt>
                        <dd class="text">突破和创新是我们骨子里的能量,<br>我们不安于现状,不墨守成规,享受每一次的挑战与成功的喜悦!<br>我们将兴趣、理想和职业完美融合,在惬意的环境里灵感不间断!</dd>
                    </dl>
                    <!-- 三角形背景 -->
                    <div class="triangle-bg ani-triangle9"></div>
                    <!-- 标题点缀 -->
                    <ul class="triangle-box">
                        <li class="ani ani-dot1"></li>
                        <li class="ani ani-dot2"></li>
                        <li class="ani ani-dot3"></li>
                        <li class="ani ani-dot4"></li>
                        <li class="ani ani-dot5"></li>
                        <li class="ani ani-dot6"></li>
                        <li class="ani ani-dot7"></li>
                    </ul>
                    <!-- 立体三角形 -->
                    <ul class="polyhedron polyhedron-green2">
                        <li class="polyhedron-item polyhedron-item1"></li>
                        <li class="polyhedron-item polyhedron-item2"></li>
                        <li class="polyhedron-item polyhedron-item3"></li>
                        <li class="polyhedron-item polyhedron-item4"></li>
                    </ul>
                    <!-- 笔 -->
                    <div class="pen"></div>
                    <!-- 画 -->
                    <ul class="draw">
                        <li class="ani-draw1"></li>
                        <li class="ani-draw2"></li>
                        <li class="ani-draw3"></li>
                    </ul>
                </div>
            </div>
            <div class="bd-item bd-resonance">
                <div class="bd-inner wrapper">
                    <dl>
                        <dt class="name">灵魂的共鸣</dt>
                        <dd class="text">有趣的灵魂 终究会相遇<br>有趣的事情 总会有共鸣<br>和有趣的人一起做有趣的事</dd>
                    </dl>
                    <!-- 标题点缀 -->
                    <ul class="triangle-box">
                        <li class="ani ani-piece1"></li>
                        <li class="ani ani-piece2"></li>
                        <li class="ani ani-piece3"></li>
                        <li class="ani ani-piece4"></li>
                        <li class="ani ani-piece5"></li>
                        <li class="ani ani-piece6"></li>
                    </ul>
                </div>
                <div class="triangle-bg ani-triangle12"></div>
                <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="760" viewBox="0, 0, 1920, 760" class="resonance-svg" id="svg"></svg>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    seajs.use('app/common', function(fn){
        fn.index();
        fn.drawSvg();
    })
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 带标题的焦点图 带缩略图的幻灯片 带简介的焦点图 图片切换 图片轮播 文字切换 自动滚动图片轮播 背景切换 马赛克幻灯片 手风琴 全屏焦点图 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到