首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue.js层叠轮播效果的实例代码

Posted in Javascript onNovember 08, 2018

最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家；

主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考；

此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.base.conf.js配置插件：

plugins: [
  new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery'
  }),
 ]

主要实现逻辑js文件：postercarousel.js；

代码如下：

(function(jq){
    function postercarousel(o, options, data){
    this.parent = jq("#"+ o);
    this.body  = jq("body");
    if (this.parent.length <= 0) { 
      return false;
    }
    
    this.options = jq.extend({}, postercarousel.options, options);
    if(typeof(data) !== 'object') return false;

    this.data = data || {};
    this.reset();
    //处理页面resize
    var _this = this;
    jq(window).resize(function(){
        _this.reset();
    });
  };
  postercarousel.prototype = {
    reset: function(options){
      if(typeof(options) == 'object'){
        jq.extend(this.options, options);  
      }
      if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') !== -1){
        this.options.width = 970;  
      }else{
        this.options.width = 970;  
      }
      this.total = this.data.length;
      this.pageNow = this.options.initPage;
      this.preLeft = 0;
      this.nextLeft = this.options.width-530;
      this.preNLeft = -530;
      this.nextNLeft = this.options.width;
      this.pageNowLeft = (this.options.width-640)/2
      this.drawContent();
    },
    drawContent: function(){
      this.parent.empty();
      this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"});
      this.content = document.createElement("DIV");
      this.content.className = this.options.className;
      this.content.cssText = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
        this.bottomNav = document.createElement("DIV");
        this.bottomNav.className = "bottomNav";
        for(var i=1; i<= this.total; i++){
          var bottomItem = document.createElement("DIV");
          bottomItem.className = "bottomNavButtonOFF";
          if(i == this.pageNow){
            bottomItem.className = "bottomNavButtonOFF bottomNavButtonON";
          }
          bottomItem.setAttribute("ref", i);
          this.bottomNav.appendChild(bottomItem);
        }
        this.content.appendChild(this.bottomNav);
        this.bannerControls = '<div class="bannerControls"> <div class="leftNav" style="display: block;"></div> <div class="rightNav" style="display: block;"></div> </div>';
        this.content.innerHTML += this.bannerControls;

      this.contentHolder = document.createElement("DIV");
      this.contentHolder.style.width = this.options.width + 'px';
      this.contentHolder.style.height = this.options.height + 'px';
      
      for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){
        var contentHolderUnit = document.createElement("DIV");
        contentHolderUnit.className = "contentHolderUnit";
        contentHolderUnit.setAttribute("ref", i);
        contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i));
        var unitItem = '<a href="'+this.data[item].url+'" rel="external nofollow" target="_blank" class="elementLink">';
        unitItem += '</a>';
        unitItem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>';
        unitItem += '<span class="elementOverlay"></span>';
        unitItem += '<span class="leftShadow"></span>';
        unitItem += '<span class="rightShadow"></span>';
        contentHolderUnit.innerHTML = unitItem;
        this.contentHolder.appendChild(contentHolderUnit);
      }
      this.content.appendChild(this.contentHolder);
      this.parent.append(this.content);
      this.parent.css({overflow:'hidden'});
      this.initContent();
      this.bind();
      this.start();
    },
    initContent: function(){
      contentHolderUnit = this.parent.find(".contentHolderUnit");
      contentHolderUnit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:'640px',height:'450', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1});
      
      var pre = this.pageNow > 1 ? this.pageNow -1: this.total;
      var next = this.pageNow == this.total ? 1 : this.pageNow + 1;
      this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
      this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
      this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
      this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});

      this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
      this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
      this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
      this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
    },
    bind: function(){
      this.leftNav = this.parent.find(".leftNav");
      this.rightNav = this.parent.find(".rightNav");
      this.bottonNav = this.parent.find(".bottomNavButtonOFF");
      this.lists = this.parent.find(".contentHolderUnit");
      var _this = this;
      this.parent.mouseover(function(){
        _this.stop();
        _this.leftNav.show();
        _this.rightNav.show();
      });
      this.parent.mouseout(function(){
        _this.start();
        //_this.leftNav.hide();
        //_this.rightNav.hide();
      });
      
      _this.leftNav.click(function(){
        _this.turn("right");           
      });
      _this.rightNav.click(function(){
        _this.turn("left");           
      });
      _this.bottonNav.click(function(){
        var ref = parseInt(this.getAttribute("ref"));
        if(_this.pageNow == ref) return false;

        if(_this.pageNow < ref){
          var rightAbs = ref - _this.pageNow;
          var leftAbs = _this.pageNow + _this.total - ref;
        }else{
          var rightAbs = _this.total - _this.pageNow + ref;
          var leftAbs = _this.pageNow - ref;
        }
        if(leftAbs < rightAbs){
           dir = "right";  
        }else{
           dir = "left";  
        }

        _this.turnpage(ref, dir);
        return false;
      });
      
      _this.lists.click(function(e){
        var ref = parseInt(this.getAttribute("ref"));
        if(_this.pageNow == ref) {
          return true;
        }else{
          e.preventDefault();
        }
        if(_this.pageNow < ref){
          var rightAbs = ref - _this.pageNow;
          var leftAbs = _this.pageNow + _this.total - ref;
        }else{
          var rightAbs = _this.total - _this.pageNow + ref;
          var leftAbs = _this.pageNow - ref;
        }
        if(leftAbs < rightAbs){
           dir = "right";  
        }else{
           dir = "left";  
        }
        _this.turnpage(ref, dir);  

      });
    },
    initBottomNav: function(){
        this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON");
        this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON");
    },
    start: function(){
      var _this = this;
      if(_this.timerId) _this.stop();
      _this.timerId = setInterval(function(){
        if(_this.options.direct == "left"){
          _this.turn("left");  
        }else{
          _this.turn("right");  
        }
      }, _this.options.delay);
    },
    stop: function(){
      clearInterval(this.timerId);
    },
    turn: function(dir){
      var _this = this;
      
      if(dir == "right"){
        var page = _this.pageNow -1;
        if(page <= 0) page = _this.total;
      }else{
        var page = _this.pageNow + 1;
        if(page > _this.total) page = 1;
      }
      _this.turnpage(page, dir);
    },
    turnpage: function(page, dir){
      var _this = this;
      if(_this.locked) return false;
      _this.locked = true;
      if(_this.pageNow == page) return false;
      
      var run = function(page, dir, t){
        var pre = page > 1 ? page -1: _this.total;
        var next = page == _this.total ? 1 : page + 1;
        var preP = pre - 1 >= 1 ? pre-1 : _this.total;
        var nextN = next + 1 > _this.total ? 1 : next+1;
        if(pre != _this.pageNow && next != _this.pageNow){
          var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total;
          var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1;
          _this.parent.find(".contentHolderUnit:nth-child("+nowpre+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
        }
        if(dir == 'left'){          
          _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
        
          
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
          
          
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3});
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
          
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width:"530px", zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0});
          _this.parent.find(".contentHolderUnit:nth-child("+preP+")").animate({width:'530px',height:'350px', opacity: 0, left:_this.preNLeft+'px', zIndex:0, marginTop: '85px'},t, "", function(){_this.locked=false;});
          
          
        }else{
          _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
          
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2});
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
          
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
          
          _this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
          
          _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0});
          _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").animate({width:'530px',height:'450', opacity: 0, left:_this.nextNLeft+'px', zIndex:0, marginTop: '85px'}, t, "",function(){_this.locked=false;});
        }
      
        _this.pageNow = page;
        _this.initBottomNav();
      };
      
      run(page, dir,_this.options.speed);          
      
    }
    
  };

  postercarousel.options = {
    offsetPages : 3,//默认可视最大条数
    direct : "left",//滚动的方向
    initPage : 1,//默认当前显示第几条
    className : "postercarousel",//最外层样式
    autoWidth : false,//默认不用设置宽
    // width : 100,//最外层宽，需要使用的时候在传,默认由程序自动判断
    height :450,//最外层高 
    delay : 3000,//滚动间隔（毫秒）
    speed : 500 //滚动速度毫秒
  };
  
  window.postercarousel = postercarousel;
})(jQuery)

相关vue组件代码以及使用方式：

代码如下：

<template>
 <div class="broadcast">
  <div class="htmleaf-container">
   <div class="htmleaf-content">
    <div id="postercarousel" style="margin:40px auto 0 auto;"></div>
   </div>
  </div>
 </div>
</template>
<script>
import "jQuery";
import "@/static/js/postercarousel";
export default {
 data() {
  return {};
 },
 mounted() {
  this.initposter();
  console.log(postercarousel);
  21  },
 methods: {
  initposter() {
   var postercarousel = new postercarousel(
    "postercarousel",
    { className: "postercarousel" },
    [
     {
      // img: require("../assets/callme.png"),
      img: 'http://occe.ospc.cn/upload/2016-01-18/145309107223576.jpg',
      // url: "http://www.htmleaf.com/"
     },
     {
      // img: require("../assets/liaojiewaibao.png"),
      img: "http://occe.ospc.cn/upload/2016-01-17/145302166917282.jpg",
      // url: "http://www.htmleaf.com/"
     },
     {
      img: require("../assets/ruhui.png"),
      img: "http://occe.ospc.cn/upload/2016-01-17/14530216405007.png",
      // url: "http://www.htmleaf.com/"
     },
     {
      // img: require("../assets/callme.png"),
      img: "http://occe.ospc.cn/upload/2016-01-18/145309108911041.jpg",
      // url: "http://www.htmleaf.com/"
     },
    ]
   );
  }
 }
};
</script>
<style lang="scss">
.broadcast {
 /* postercarousel */
 #postercarousel {
  width: 100% !important;
  height: 450px;
 }
 .postercarousel {
  position: relative;
  height: 100%;
  width: 100% !important;
 }
 .postercarousel img {
  max-width: 100%;
  max-height: 100%;
  border: 0 none;
  background: #888;
  display: block;
 }
 .postercarousel .contentHolder {
  position: relative;
  overflow: hidden;
 }
 .postercarousel .contentHolderUnit {
  cursor: pointer;
  position: absolute;
  width: 83% !important;
  height: 450px;
 }
 .postercarousel .contentHolderUnit a.elementLink {
  display: block;
  overflow: hidden;
  z-index: 3;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
 }
 .postercarousel .contentHolderUnit img {
  width: 100%;
  height: 100%;
  display: block;
 }
 .postercarousel .contentHolderUnit .elementTitle {
 }
 .postercarousel .contentHolderUnit .elementOverlay {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: opacity=0;
 }
 .postercarousel .contentHolderUnit .leftShadow {
  position: absolute;
  top: 23px;
  left:-250px;
  // width: 250px;
  height:327px;
  background: url("../assets/images/leftShadow.png") no-repeat;
  background-size: contain;
 }
 .postercarousel .contentHolderUnit .rightShadow {
  position: absolute;
  top: 23px;
  right:134px;
  height: 327px;
  background: url("../assets/images/rightShadow.png") no-repeat;
  background-size: contain;
 }
 .postercarousel .bannerControls {
 }
 .postercarousel .leftNav,
 .postercarousel .rightNav {
  cursor: pointer;
  z-index: 10;
  position: absolute;
  top: 60%;
  width: 45px;
  height: 45px;
  margin-top: -43px;
 }
 .postercarousel .leftNav {
  left: 7px;
  background: url("../assets/images/1.png") no-repeat;
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_prev_btn.png");
 }
 .postercarousel .rightNav {
  right: 7px;
  background: url("../assets/images/2.png") no-repeat;
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_next_btn.png");
 }
 .postercarousel .leftNav:hover {
 }
 .postercarousel .rightNav:hover {
 }
 .postercarousel .bottomNav {
  z-index: 140;
  position: absolute;
  width: 100%;
  height: 10px;
  margin-top: 400px;
  padding: 10px 0 0;
  text-align: center;
 }
 .postercarousel .bottomNavButtonOFF {
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  vertical-align: top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #c3c3c3;
 }
 .postercarousel .bottomNavButtonOFF:hover {
  background: #aaa;
 }
 .postercarousel .bottomNavButtonON,
 .postercarousel .bottomNavButtonON:hover {
  background: #69aaec;
 }
 .postercarousel .bottomNavLeft {
 }
 .postercarousel .bottomNavRight {
 }
}
</style>

总结

以上所述是小编给大家介绍的vue.js层叠轮播效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

vue.js层叠轮播效果的实例代码

- Author -

执着的小猪仔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue-cli 构建骨架屏的方法示例
Nov 08 #Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 #Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 #Javascript
Angular设置别名alias的方法
Nov 08 #Javascript
vue-cli安装使用流程步骤详解
Nov 08 #Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 #Javascript
装饰器(1) 网页解析(1) 分块(1) 读取(1) decorator(1) bs4(1) translation(2) 数组(5) 数据保存(1) 查找算法(1)
You might like
分享PHP入门的学习方法
2007/01/02 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
js倒计时显示实例
2016/12/11 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
HTML5+Canvas调用手机拍照功能实现图片上传（下）
2017/04/21 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
把大数据数字口语化（python与js）两种实现
2013/02/21 Python
Python os模块学习笔记
2015/06/21 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
工作中的自我评价如何写好
2013/10/28 职场文书
单位领导证婚词
2014/01/14 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
党的群众路线教育实践活动对照检查材料思想汇报（党员篇）
2014/09/25 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
青年文明号汇报材料
2014/12/23 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle