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

javascript经典特效分享 手风琴、轮播图、图片滑动

Posted in Javascript onSeptember 14, 2016

最近都没有更，就来几个效果充实一下。
都没有进行美化这步。 

纯css的手风琴：

javascript经典特效分享 手风琴、轮播图、图片滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>手风琴css</title>
 <style>
 .showBox{
 width: 660px;
 overflow: hidden;
 }
 ul{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 30000px;
 }
 
 ul li{
  float: left;
  position: relative;
  height: 254px;
  width: 110px;
  overflow: hidden;
  transition: all 0.3s;
 }
 /* 这是css手风琴的核心，就是hover的使用
 **首先是ul:hover li这个触发了经过ul但没有经过li的变化
 **然后是ul li:hover这里是被经过li的变化，匹配css3动画效果，
 和css3的一些对页面美化的效果，就可以做出一个很好看的手风琴，
 如果使用纯js实现可能很麻烦。
  */
 ul:hover li{
  width:22px;
 }
 ul li:hover{
  width: 460px;
 }

 ul li img{
  width: 550px;
  height: 254px;
 }
 ul li span{
  width: 22px;
  position: absolute;
  top: 0;
  right: 0;
  height: 204px;
  padding-top: 50px;
  color: #fff;
 }
 ul li span.bg1{
  background: #333;
 }
 ul li span.bg2{
  background: #0f0;
 }
 ul li span.bg3{
  background: #ff7500;
 }
 ul li span.bg4{
  background: #0ff;
 }
 ul li span.bg5{
  background: #00f;
 }
 </style>
 <script type="text/javascript">
 
 </script>
</head>
<body>
 <div class="showBox">
 <ul>
  <li><span class="bg1">这是第一个</span><img src="1.jpg" alt=""></li>
  <li><span class="bg2">这是第二个</span><img src="2.jpeg" alt=""></li>
  <li><span class="bg3">这是第三个</span><img src="3.jpg" alt=""></li>
  <li><span class="bg4">这是第四个</span><img src="4.jpg" alt=""></li>
  <li><span class="bg5">这是第五个</span><img src="5.jpg" alt=""></li>
 </ul>
 </div>
</body>
</html>

css3手风琴： 

javascript经典特效分享 手风琴、轮播图、图片滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>css3-checked:</title>
 <style>
 /* 使用了radio的单选特性，实现手风琴效果 */
 ul{
  display: none;
 }
  input{display: none;} 
  label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;} 
  .list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;} 
  #list1:checked + ul{display: block;} 
  #list2:checked + ul{display: block;} 
  #list3:checked + ul{display: block;} 
  #list4:checked + ul{display: block;}
 </style>
</head>
<body>
 <div> <label for="list1">我的同学</label> <input type="radio" name="list" id="list1" checked="chekced"/> 
 <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list2">我的同学</label> 
 <input type="radio" name="list" id="list2"/> 
 <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list3">我的同学</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list4">我的同学</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> </div>
</body>
</html>

javascript实现的手风琴： 

javascript经典特效分享 手风琴、轮播图、图片滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>手风琴</title>
 <style>
 .showBox{
 width: 660px;
 overflow: hidden;
 }
 ul{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 30000px;
 }
 ul li.active{
  width: 550px;
 }
 ul li{
  float: left;
  position: relative;
  height: 254px;
  width: 22px;
  overflow: hidden;
 }
 ul li img{
  width: 660px;
  height: 254px;
 }
 ul li span{
  width: 22px;
  position: absolute;
  top: 0;
  left: 0;
  height: 204px;
  padding-top: 50px;
 }
 ul li span.bg1{
  background: #333;
 }
 ul li span.bg2{
  background: #0f0;
 }
 ul li span.bg3{
  background: #ff7500;
 }
 ul li span.bg4{
  background: #0ff;
 }
 ul li span.bg5{
  background: #00f;
 }
 </style>

 <script type="text/javascript">
 window.onload=function ()
 {
  createAccordion('.showBox');
 };

 function createAccordion(name)
 {
  /*获取元素*/
  var oDiv=document.querySelector(name);
  /*声明最小宽度*/
  var iMinWidth=9999999;
  /*获取元素*/
  var aLi=oDiv.getElementsByTagName('li');
  var aSpan=oDiv.getElementsByTagName('span');
  /*定时器容器默认*/
  oDiv.timer=null;
  /*循环添加事件和自定义属性索引值*/
  for(vari=0;i<aSpan.length;i++)
  {
  aSpan[i].index=i;
  aSpan[i].onmouseover=function ()
  {
   gotoImg(oDiv, this.index, iMinWidth);
  };
  /*获取最小宽度*/
  iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
  }
 };

 function gotoImg(oDiv, iIndex, iMinWidth)
 {
  if(oDiv.timer)
  { /*清除定时器，避免叠加*/
  clearInterval(oDiv.timer);
  }
  /*开启定时器*/
  oDiv.timer=setInterval
  (
  function ()
  {
   changeWidthInner(oDiv, iIndex, iMinWidth);
  }, 30
  );
 }
 /*这里是关键，运动*/
 function changeWidthInner(oDiv, iIndex, iMinWidth)
 {
  var aLi=oDiv.getElementsByTagName('li');
  var aSpan=oDiv.getElementsByTagName('span');
  /*获取盒子的大小，这个是总宽度*/
  var iWidth=oDiv.offsetWidth;
  /*缩进去的图片的宽度声明*/
  var w=0;
  /*判断的声明,为了清除定时器声明*/
  var bEnd=true;
  /*循环为了把每个图片都循环一遍，为了获取伸进和缩去的元素*/
  for(var i=0;i<aLi.length;i++)
  {
  /*这为获取伸进的索引*/
  if(i==iIndex)
  {
   continue;
  }
  /*这里是没有变动的元素，所以都保存最小宽度*/
  if(iMinWidth==aLi[i].offsetWidth)
  {
   /*总宽度减去这些宽度,因为他们也在总宽度里*/
   iWidth-=iMinWidth;
   continue;
  }
  /*走以下的循环里代码的是缩去的元素*/
  /*不清除定时器，还没运动完*/
  bEnd=false;
  /*获取速度,先快后慢*/
  speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
  /*缩去剩下的宽度*/
  w=aLi[i].offsetWidth-speed;
  /*为避免缩去元素小于最小宽度*/
  if(w<=iMinWidth)
  {
   w=iMinWidth;
  }
  /*设置缩去元素的宽度*/
  aLi[i].style.width=w+'px';
  /*减去缩去的宽度，剩下的就是伸进的宽度*/
  iWidth-=w;
  }
  /*伸进元素的宽度*/
  aLi[iIndex].style.width=iWidth+'px';
  
  if(bEnd)
  {
  clearInterval(oDiv.timer);
  oDiv.timer=null;
  }
 }
 </script>
</head>
<body>
 <div class="showBox">
 <ul>
  <li class="active"><span class="bg1">这是第一个</span><img src="1.jpg" alt=""></li>
  <li><span class="bg2">这是第二个</span><img src="2.jpeg" alt=""></li>
  <li><span class="bg3">这是第三个</span><img src="3.jpg" alt=""></li>
  <li><span class="bg4">这是第四个</span><img src="4.jpg" alt=""></li>
  <li><span class="bg5">这是第五个</span><img src="5.jpg" alt=""></li>
 </ul>
 </div>
</body>
</html>

接下来的都是会使用到动画效果，既然这样就把封装好运动： 

javascript经典特效分享 手风琴、轮播图、图片滑动

/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
 其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
 function doMove(obj,attr,speed,iTarget,fn){
  if(attr=="opacity"){
  obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
  }else{
  obj.len=iTarget-parseFloat(getStyle(obj,attr));
  }
  /*这里判断方向，在初始点后的为负数，在初始点前为正数*/
  speed=obj.len>0?speed:-speed;

  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
  if(!obj.num){
   obj.num=0;
  }
  if(attr=="opacity"){
   obj.num=parseFloat(getStyle(obj,attr))*100+speed;
  }else{
   obj.num=parseInt(getStyle(obj,attr))+speed;
  }
  /*这里是判断到了目标点没有，到了就停止定时器*/
  if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
   obj.num=iTarget;
   clearInterval(obj.timer);
  }
  if(attr=="opacity"){
   obj.style[attr]=obj.num/100;
  }else{
   obj.style[attr]=obj.num+"px";
  }
  /*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
  if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
   fn && fn();
  }
  },30);

 }
 /*获取css属性值的，会获取表现出现的值*/
 function getStyle(obj,attr){
  return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
 }

轮播图： 

javascript经典特效分享 手风琴、轮播图、图片滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <!-- 这是引用封装好运动函数 -->
 <script type="text/javascript" src="doMove.js"></script>
 <script type="text/javascript">
 window.onload=function(){
  /*调用实现轮播*/
  carousel("carousel")
 }
 
 function carousel(name){
  var oScl=document.getElementById(name);
  var oUl=oScl.querySelector("ul");
  var aLi=oUl.querySelectorAll("li");
  var next=document.getElementById("next");
  var pre=document.getElementById("pre");
  var aIndex=oScl.querySelectorAll(".index span");
  var num=0;
  var index=0;
  /*给第一个图片最高级层级*/
  aLi[0].style.zIndex=5;
  /*判断定时器存不存在*/
  if(!oScl.timer){
  oScl.timer=null;
  }

  /*这是自动轮播开启*/
  oScl.timer=setInterval(function(){
  num++;
  num%=aLi.length;
  play();
  },2000);
  /*上下页显示、隐藏*/
  oScl.onmouseover=function(){
  /*移入停止定时器*/
  clearInterval(oScl.timer);
  next.style.display="block";
  pre.style.display="block";
  }
  oScl.onmouseout=function(){
  next.style.display="none";
  pre.style.display="none";
  /*移出开启定时器*/
   oScl.timer=setInterval(function(){
   num++;
   num%=aLi.length;
   play();
  },2000);
  }
  /*点击上下页*/
  next.onclick=function(){
  num++;
  num%=aLi.length;
  play();
  }
  pre.onclick=function(){
  if(!aLi[index]){
   index=num;
  }
  num--;
  if(num<0){
   num=aLi.length-1;
  }
  play();
  }

  /*索引点*/
  for(var i=0;i<aIndex.length;i++){
  aIndex[i].index=i;
  aIndex[i].onmouseover=function(){
   num=this.index;
   play();
  }
  }
  /*动画执行函数*/
  function play(){
  /*判断是否是相同触发点，如索引点的两次移入都是相同的，
   如果是不执行,避免连续重复执行
  */
  if(index!=num){
   for(var i=0;i<aLi.length;i++){
   /*设置全部层级为1*/
   aLi[i].style.zIndex=1;
   }
   /*设置上次轮播过的图的层级为2*/
   aLi[index].style.zIndex=2;
   aIndex[index].className=""; 
   aIndex[num].className="active";
   index=num;
   /*设置这次轮播的图透明度为0*/
   aLi[num].style.opacity=0;
   /*设置这是轮播的图的层级为5*/
   aLi[num].style.zIndex=5;
   /*运动函数封装，淡出这次的图*/
   doMove(aLi[num],"opacity",10,100);
  }
  }
 }


 </script>
 <style>
 a{
  text-decoration: none;
  color: #555;
 }
 #carousel{
  font-family: "微软雅黑";
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
 }
 #carousel ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
 }
 #carousel ul li{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
 }
 .imgBox img{
  width: 800px;
  height: 400px;
 }
 .btn{
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 45px;
  height: 62px;
  margin-top: -31px;
  text-align: center;
  line-height: 62px;
  font-size: 40px;
  background: rgba(0,0,0,0.4);
  opacity: alpha(opacity=50);
  display: none;
 }
 #pre{
  left: 0;
 }
 #next{
  right: 0;
 }
 #carousel .index{
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 10;
 }
 #carousel .index span{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #87CEFA;
  display: inline-block;
  box-shadow:1px 1px 6px #4169E1; 
 }
 #carousel .index span.active{
  background: #4169E1;
  box-shadow:1px 1px 6px #87CEFA inset; 
 }
 </style>
</head>
<body>
 <div id="carousel">
 <ul class="imgBox">
  <li><a href="#"><img src="1.jpg" alt=""></a></li>
  <li><a href="#"><img src="2.jpg" alt=""></a></li>
  <li><a href="#"><img src="3.jpg" alt=""></a></li>
  <li><a href="#"><img src="4.jpg" alt=""></a></li>
  <li><a href="#"><img src="5.jpg" alt=""></a></li>
 </ul>
 <a href="javascript:;" class="btn" id="next">></a>
 <a href="javascript:;" class="btn" id="pre"><</a>
 <div class="index">
  <span class="active"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 </div>
 </div>
</body>
</html>

这个是使用插件做的：responsiveslides.js 

基于jquery 

javascript经典特效分享 手风琴、轮播图、图片滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <!-- 引入插件js和jquery -->
 <script src="jquery-2.0.3.js"></script>
 <script src="responsiveslides.js"></script>
 <style>
 #banner{
  position: relative;
  width: 800px;
 }
 /* 插件的默认css属性 */
 .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

 .rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

 .rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

 .rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  /* ，被修改过的，修改成圆点按钮 */
  ul.rslides_tabs.rslides1_tabs {
  position: absolute;
  bottom: 10px;
  left: 45%;
  list-style: none;
  z-index: 10;
 }
 ul.rslides_tabs.rslides1_tabs li{
  float: left;
  
 }
 ul.rslides_tabs.rslides1_tabs li a{
  display: block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: #fff;
 }
 /* .rslides_here 这个相当于active */
 ul.rslides_tabs.rslides1_tabs li.rslides_here a{
  background: #004F88;
 }
 /* 左右按钮的class名 */
 .rslides_nav.rslides1_nav{
  position: absolute;
  top: 50%;
  color: #eee;
  font-size: 40px;
  text-decoration: none;
  z-index: 4;
 }
 .rslides_nav.rslides1_nav.pre{
  left: 10px;
 }
 .rslides_nav.rslides1_nav.next{
  right: 10px;
 }

 .rslides img{
  height: 400px;
 }
 </style>
 <script>
 $(function() {
 $(".rslides").responsiveSlides({
  pager: true,  
  // 默认为false,需要展示时（true）展示索引点，默认为数字12345，去js库里修改就可以了
  nav: true,  // 展示上一张和下一张的导航
  pause: false,  // 鼠标移入移出是否停止
  pauseControls: true, // Boolean: Pause when hovering controls, true or false
  prevText: "<", // 修改左右按钮的符号
  nextText: ">", // String: Text for the "next" button
  "maxwidth":"800px"
 });
 $(".rslides1_nav").css("display","none"); 
 $("#banner").mouseover(function(){
 $(".rslides1_nav").css("display","block");
 })
 $("#banner").mouseout(function(){
 $(".rslides1_nav").css("display","none");
 })
 
 });
</script>
 </script>
</head>
<body>
<!-- 使用一个div包住它，而那些js添加的标签会直接加载到ul标签后面 -->
<div id="banner">
 <ul class="rslides" id="rslides">
 <li><img src="111.jpg" alt=""></li>
 <li><img src="222.jpg" alt=""></li>
 <li><img src="333.jpg" alt=""></li>
 <li><img src="444.jpg" alt=""></li>
 <li><img src="555.jpg" alt=""></li>
 </ul>
</div>
</body>
</html>

图片滑动： 

javascript经典特效分享 手风琴、轮播图、图片滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片滑动</title>
 <style>
 .container{
  position: relative;
  width: 630px;
  border: 2px solid #888;
  padding: 5px;
 }
 .c-wrap{
  width: 630px;
  overflow: hidden;
 }
 .container img{
  width: 200px;
  height: 90px;
 }

 .container ul{
  list-style: none;
  margin: 0;
  padding: 0;
 }
 .container ul li{
  float: left;
  margin-right: 10px;
 }
 .container .imgBigBox{
  width: 33000px;
  margin-left: 0px;
 }
 .imgBigBox:after{
  content: " ";
  display: block;
  clear: both;
 }
 .btnGroup{
  border: 1px solid #888;
  width: 65px;
 }
 .btnGroup a{
  text-align: center;
  line-height: 20px;
  text-decoration: none;
  color: #888;
  font-size: 20px;
  display: inline-block;
  width: 30px;
 }
 .btn1{
  margin-right: 4px;
  border-right: 1px solid #888;
 }
 </style>
 <!-- 引用运动函数 -->
 <script type="text/javascript" src="doMove.js"></script>
 <script type="text/javascript">
 window.onload=function(){
  /*调用函数实现滑动*/
  slide(".container");
 }

 function slide(name){
  var oContainer=document.querySelector(name);
  var oImgBigBox=oContainer.querySelector(".imgBigBox");
  var aBtn=oContainer.querySelectorAll(".btnGroup a");
  var oC_wrap=oContainer.querySelector(".c-wrap");
  /*获取滑动宽度*/
  var w=oC_wrap.offsetWidth;
  /*点击左边按钮*/
  aBtn[0].onclick=function(){
  doMove(oImgBigBox,"marginLeft",10,-w,function(){
  var child=oImgBigBox.children[0].cloneNode(true);
   oImgBigBox.appendChild(child);
   oImgBigBox.removeChild(oImgBigBox.children[0]);
   oImgBigBox.style.marginLeft="0px";
  })
  }
  /*点击右边按钮*/
  aBtn[1].onclick=function(){
   oImgBigBox.insertBefore(oImgBigBox.children[1],oImgBigBox.children[0]);
   oImgBigBox.style.marginLeft=-w+"px";
  doMove(oImgBigBox,"marginLeft",10,0)
  }
 }
 </script>
</head>
<body>
 <div class="container">
 <div class="c-wrap">
  <div class="imgBigBox">
  <ul class="imgBox">
   <li><img src="1.jpg" alt=""></li>
   <li><img src="2.jpg" alt=""></li>
   <li><img src="3.jpg" alt=""></li>
  </ul>
  <ul class="imgBox">
   <li><img src="4.jpg" alt=""></li>
   <li><img src="5.jpg" alt=""></li>
   <li><img src="6.jpg" alt=""></li>
  </ul>
  </div>
 </div>
 <div class="btnGroup">
  <a href="javascript:;" class="btn1"><</a><a href="javascript:;" class="btn2">></a> 
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript经典特效分享 手风琴、轮播图、图片滑动

- Author -

小数点就是问题

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

Javascript 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
javascript实现网页屏蔽Backspace事件，输入框不屏蔽
Jul 21 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
Angular 应用技巧总结
Sep 14 #Javascript
AngularJS 所有版本下载地址
Sep 14 #Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 #Javascript
Angularjs 制作购物车功能实例代码
Sep 14 #Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper（三）
Sep 14 #Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 #Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper（二）
Sep 14 #Javascript
key(1) python-pcl(1) Anaconda(2) pycryto(1) 历史记录(1) 公共键(1) 遍历文件夹(1) html标准库(1) dll(1) 有序排列(1)
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
Laravel执行migrate命令提示：No such file or directory的解决方法
2016/03/16 PHP
php单例模式的简单实现方法
2016/06/10 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
django 将model转换为字典的方法示例
2018/10/16 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
如何使用python操作vmware
2019/07/27 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
美国知名男士服饰品牌：Brooks Brothers（布克兄弟）
2016/08/25 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
清洁工表扬信
2014/01/08 职场文书
会计工作心得体会
2014/01/13 职场文书
业务总经理岗位职责
2014/02/03 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
2014年党课学习材料
2014/05/11 职场文书
大学迎新标语
2014/06/26 职场文书
社区服务活动报告
2015/02/05 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫