首页
所有分类
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 相关文章推荐
判断window.onload是否多次使用的方法
Sep 21 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
javascript元素动态创建实现方法
May 13 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
JS严格模式知识点总结
Feb 27 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 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) 策略(1) ipv6(1) PV(1) UV(1) 进程假死(1) 连接数(1) 内存(1) 弱口令(1) 访问日志(2)
You might like
PHP安装攻略:常见问题解答（三）
2006/10/09 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
javascript 解析url的search方法
2010/02/09 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
详解Python的Django框架中的模版相关知识
2015/07/15 Python
玩转python selenium鼠标键盘操作（ActionChains）
2020/04/12 Python
Python_LDA实现方法详解
2017/10/25 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
python如何查看网页代码
2020/06/07 Python
python3的pip路径在哪
2020/06/23 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
英国屋顶用品和材料超市：Roofing Supplies UK
2019/08/24 全球购物
澳大利亚家用电器在线商店：Billy Guyatts
2020/05/05 全球购物
机械专业求职信
2014/05/25 职场文书
写字楼租赁意向书
2014/07/30 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
投标售后服务承诺书
2015/04/29 职场文书
火锅店的开业营销方案范本！
2019/07/05 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript