首页
所有分类
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 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
简单的无缝滚动程序-仅几行代码
May 08 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
详释JavaScript执行环境与执行栈
Apr 02 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 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
变量提升(1) cypress(1) openGauss(1) Eclipse(1) 弹窗(1) form表单(1) pdf(1) ant design(2) 太阳码(1) JDBC(3)
You might like
一家之言的经验之谈php＋mysql扎实个人基本功
2008/03/27 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
jQuery快速上手：写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
使用Python绘制图表大全总结
2017/02/11 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python数据结构与算法之图结构（Graph）实例分析
2017/09/05 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python中的set实现不重复的排序原理
2018/01/24 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
python爬虫之遍历单个域名
2019/11/20 Python
实现Python与STM32通信方式
2019/12/18 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Expedia法国：全球最大在线旅游公司
2018/09/30 全球购物
销售员个人求职的自我评价
2014/02/10 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
四年级数学教学反思
2016/02/16 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python