html5手机端微信招聘信息动画切换



64 253 85



特效描述:html5手机端 微信招聘信息 动画切换,html5手机端微信招聘信息动画切换

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/code.min.js"></script>

3. HTML代码

<div class="swiper-container" id="swiper-container-v">
<section class="poster_wrap load" id="load">
	  <div class="p_loading">
	    <div class="p_loading_logo"></div>
	    <p class="p_loading_tip">新生活,从新工作开始</p>
	  </div>
	</section>
    <div class="swiper-wrapper">
    <!-------------slide1----------------->
        <section class="swiper-slide swiper-slide1 swiper-slide-v" >
        <div class="index-top ani" swiper-animate-effect="myZoomIn1" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
<div class="logo">
<div class="box1"><div class="box2">
   <img src="upload/wzp_logo.png"   > 
   </div></div>
</div>
<h1 class="poster_tit">某同城公司</h1>
<p class="poster_details">新生活,从新工作开始</p>
</div>
<div class="building ani"  swiper-animate-effect="myZoomIn2" swiper-animate-duration="0.6s" swiper-animate-delay="0s"></div>
        </section>
     <!---------------slide2-------------->   
        <section class="swiper-slide swiper-slide2 swiper-slide-v">
<ul class="company_intro">
    <li class="intro1 ani"   swiper-animate-effect="myFlip" swiper-animate-duration="0.3s" swiper-animate-delay="0s">
          <div class="icon"><i></i></div>
      <p>深圳</p>
    </li>
    <li class="intro2 ani"   swiper-animate-effect="myFlip" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
          <div class="icon"><i></i></div>
      <p>50-500人</p>
    </li>
    <li class="intro3 ani"   swiper-animate-effect="myFlip" swiper-animate-duration="0.3s" swiper-animate-delay="0.2s">
          <div class="icon"><i></i></div>
      <p>私营</p>
    </li>
  </ul>
  <h3 class="about_us_tit ani"    swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s"><i class="about_us_tit_ico"></i>认识我们</h3>
  <div class="about_us_msg_p ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.5s">美国纽交所上市公司,国内专业的“本地、免费、真实、高效”生活服务平台!找租房,找二手房,找工作,找兼职,买卖二手,二手车交易,买卖宠物,找搬家,找保姆,找保洁,租车拼车,工商注册,婚车婚宴,上某同城一站解决!信息真实可靠,先行赔付!</div>
        </section>
     <!----------------slide3-------------->
        <section class="swiper-slide swiper-slide3 swiper-slide-v">
<h1 class="abus_head"><i class="about_us_tit_ico"></i>我们的福利</h1>
<div class="welf_bg">
    <div class="one ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s"><span>五险一金</span></div>
    <div class="two ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s"><span>每周双休</span></div>
    <div class="thr ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><span>福利待遇好</span></div>
    <div class="thi ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><span>发展前景好</span></div>
    <div class="fiv ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><span>晋升空间大</span></div>
    <div class="six ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><span>提供培训</span></div>
  </div>
        </section>
        <!-------------slide4----------------->
        <section class="swiper-slide swiper-slide4 swiper-slide-v">
<h1 class="posit_tit"><i class="about_us_tit_ico"></i>我们招聘的职位</h1>
<div class="swiper-container ani" id="swiper-container-h" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide1">
    <div class="posit_details_head">
            <h3 class="posit_details_tit">公关专员</h3>
            <span class="posit_details_money"><strong>面议</strong></span>
            <p class="posit_details_tip">经验不限、学历本科</p>
          </div>
    <div class="job_details">
            <p class="job_address">工作地点:广东省深圳市南山区高新科技园</p>
            <h3 class="job_name">任职要求:<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
            <div class="job_msg">任职资格:1.协助领导处理与各部门沟通和合作事宜;<br>
2.收集媒体信息,处理与各类媒体接洽、合作关系,协助媒介公关;<br>
3.注意收集影响本公司形象、声誉、关系的因素和事件信息,分析其后果,及时向领导提出对策建议;<br>
4.配合做好来宾迎送、接待、陪同、参观、讲解等工作;<br>
5.负责对合同的审阅、整理、归档、款项申请及保管工作;<br>
6.完成领导交办的其它工作。</div>
          </div> 
          <div class="posit_arrow_bot"></div>     
    </div>
    <div class="swiper-slide slide2">
          <div class="posit_details_head">
            <h3 class="posit_details_tit">前台接待/总机/接待生</h3>
            <span class="posit_details_money"><strong>面议</strong></span>
            <p class="posit_details_tip">经验不限、学历不限</p>
          </div>
          <div class="job_details">
            <p class="job_address">工作地点:广东省深圳市南山区高新科技园</p>
            <h3 class="job_name">任职要求:<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
            <div class="job_msg">任职资格:1、准确接听/转接电话,接待来访客人并及时准确通知被访人员;<br>
2、收发公司邮件、报刊、传真和物品等并做好登记管理以及转递工作;<br>
3、熟悉掌握前台各项操作流程,并熟知各会员卡的种类,以及卖品和出租更衣柜的销售价格;<br>
4、完成上级主管交办的其它工作,做好其他部门的协助工作;<br>
5、具有良好的待人接物及沟通协调能力,具有服务意识,负有责任心,性格活泼开朗,具有亲和力<br>
</div>
          </div>
          <div class="posit_arrow_bot"></div>
        </div>
    <div class="swiper-slide slide3">
          <div class="posit_details_head">
            <h3 class="posit_details_tit">Web前端开发、互联网软件开发工程师</h3>
            <span class="posit_details_money"><strong>面议</strong></span>
            <p class="posit_details_tip">经验不限、学历大专</p>
          </div>
          <div class="job_details">
            <p class="job_address">工作地点:广东省深圳市南山区高新科技园</p>
            <h3 class="job_name">任职要求:<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
            <div class="job_msg">
任职资格:精通javascript、html;精通PS、Dreamweaver;<br>
精通WEB标准,熟练运用 DIV+CSS 来制作符合 w3c 规范的页面;<br>
具备熟练的编写和修改代码能力;<br>
懂得网络营销、精通页面优化技巧;<br>
具备良好的团队合作精神、较好的沟通能力、高度的责任感;</div>
          </div>
          <div class="posit_arrow_bot"></div>
    </div>
      <div class="swiper-slide slide4">
          <div class="posit_details_head">
            <h3 class="posit_details_tit">总经理助理/总裁助理/总经理秘书</h3>
            <span class="posit_details_money"><strong>面议</strong></span>
            <p class="posit_details_tip">经验不限、学历大专</p>
          </div>
          <div class="job_details">
            <p class="job_address">工作地点:广东省深圳市南山区高新科技园</p>
            <h3 class="job_name">任职要求:<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
            <div class="job_msg">任职资格:1、负责对项目出现的各类问题进行沟通协调,及时向总裁反馈重要信息;<br>
2、根据总裁需要,搜集行业相关信息,统计数据,撰写可行性研究报告等供总经理决策;<br>
3、协助总裁与客户建立良好的合作关系,并负责做好公司重要来宾的接待安排;<br>
4、撰写总裁需要的有关报告、文件;<br>
5、处理涉及总裁的电话、邮件、传真等各种渠道的信息,做到合理过滤和正确传达;<br>
6、有总裁亲自出面进行的接待,其餐饮、住宿、旅游等具体细节有总裁助理协助行政部共同安排;<br>
7、完成公司领导交办的其他工作任务;</div>
          </div>
          <div class="posit_arrow_bot"></div>
       </div>
     <div class="swiper-slide slide5">
          <div class="posit_details_head">
            <h3 class="posit_details_tit">文案策划</h3>
            <span class="posit_details_money"><strong>面议</strong></span>
            <p class="posit_details_tip">经验不限、学历本科</p>
          </div>
          <div class="job_details">
            <p class="job_address">工作地点:广东省深圳市南山区高新科技园</p>
            <h3 class="job_name">任职要求:<a class="job_name_details" href="#">职位详情&gt;&gt;</a></h3>
            <div class="job_msg">任职资格:1、文笔流畅,触觉敏锐,思路清晰,良好的沟通能力和演讲能力;<br>2、熟练操作PPT,Excel等相关办公软件;了解无线WiFi网络常识,乐于追赶时尚潮流;<br>3、熟悉微营销,擅长媒体的媒介数据分析、媒体策略、投放计划、广告监测执行、广告效果评估等相关工作,具备独立的媒体策划能力和提案能力,有成功策划案例者优先;<br>4、具备良好的职业素养、较强的执行力、责任心、工作主动性、服务意识、沟通能力和团队合作精神。<br>5、本科或以上学历,2年以上广告公司媒介策划相关工作经验。</div>
          </div>
          <div class="posit_arrow_bot"></div>
        </div>
  </div>
</div>
<div class="job_btn_con ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.1s" swiper-animate-delay="0.5s">
  				    <div class="job_btn_list">
		      <a href="#" class="job_btn add" >投个简历</a>
		      <a href="tel:0755-12345678" class="job_btn tel">电话联系</a>
		    </div>
	    	      </div>
        </section>
<!-------------slide5----------------->       
  <section class="swiper-slide swiper-slide5 swiper-slide-v">     
  <div class="logo">
<div class="box1"><div class="box2">
   <img src="upload/wzp_logo.png"   > 
   </div></div>
</div>
<p class="praise_tip ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0s">已有<b>5</b>人觉得这家公司值得加入</p>
<a class="praise_btn ani" href="javascript:;"   swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
    <i><em></em></i><span>点赞,值得加入</span>
  </a>
 <a class="praise_share_btn ani" href="javascript:;"   swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.2s">分享给好友</a> 
<a class="more_position ani" href="#" id="viewmoreinfozp"   swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">查看更多职位&gt;&gt;</a> 
  </section>
<!-------------slide6----------------->       
  <section class="swiper-slide swiper-slide6 swiper-slide-v">     
  <div class="logo ani"  swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0s">
<div class="box1"><div class="box2">
   <img src="upload/wzp_logo.png"   > 
   </div></div>
</div>
<div class="search_posit ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
      <div class="search_input_con">
        <div class="search_input_details">
          <input type="text" placeholder="搜索我感兴趣的企业" value="" class="search_input">
        </div>
      </div>
      <a class="search_btn" href="javascript:;"></a>
    </div>
  <a class="search_footer_btn ani" href="#"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">创建我的微招聘</a>  
  <p class="search_footer_tip ani"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">某同城提供以上服务</p>  
  </section>   
    </div>
<div class="arrow-box">
   <img src="images/arrow.png" id="array"> 
   </div>    
  <div class="swiper-pagination"></div>  
</div>
<!--切换效果采用Swiper,更多Swiper应用敬请关注Swiper中文网-->



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


热门标签: 图片翻转 图片旋转 图片全屏 图片淡出淡进 图片淡出 图片淡进 图片延迟加载 图片延迟 图片加载 图片叠加 图片层叠 图片放大镜 头像上传 图片上传 图片拖动 图片拖拽 二维码 带缩略图的幻灯片 滚动切换 滚动条切换 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 滑动选项卡 滑动切换 加载动画 地图 中国地图 世界地图 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片广告 纯图片轮播 图片轮播 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片滚动 图片滚动条 图片收缩展开 图片收缩 图片展开 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡 自动滚动图片轮播 图标导航 图标菜单 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 背景切换 大图切换 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 图表 图片 图片插件 头像截图 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片切换 图片选项卡 图标选项卡 选项卡自动切换 图片切换 切换图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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