首页
所有分类
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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
javascript （用setTimeout而非setInterval）
Dec 28 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
S700(1) S400(1) S500(1) ATS-909X(1) PL990(2) BCL3000(2) H-501(1) PL450(1) ICF-SW07(1) Grundig(1)
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
php实用代码片段整理
2016/11/12 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
基于jQuery实现左右图片轮播（原理通用）
2015/12/24 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python文件及目录操作实例详解
2015/06/04 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
什么是python的必选参数
2020/06/21 Python
应届生高等护理求职信
2013/10/12 职场文书
大学班长的职责
2014/01/27 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android