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层叠轮播效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery select下拉框操作的一些说明
Apr 02 Javascript
20个最新的jQuery插件
Jan 13 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
JS匿名函数实例分析
Nov 26 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
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
You might like
一个MYSQL操作类
2006/11/16 PHP
15种PHP Encoder的比较
2007/04/17 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
使用python绘制二维图形示例
2019/11/22 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
教学质量评估实施方案
2014/03/17 职场文书
爱我中华演讲稿
2014/05/20 职场文书
2014年团队工作总结
2014/11/24 职场文书
社区好人好事材料
2014/12/26 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python