Go to comments

jQuery 10个实例 上

一、tab

tab 标签主要的思想

如果用一组元素控制另一组元素的显示或隐藏，需要用到索引

这里的索引是 index，无缝滚动也要用到这个思想

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab</title>
<style>
body,ul,li{padding:0;margin:0;}
li{list-style-type:none;}
.hide{display:none;}
.wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.tabTitle ul{
  overflow: hidden;_height:1px;/*清除浮动，并兼容ie6*/
}
.tabTitle ul li{
  float: left;
  border: 1px solid #abcdef;
  border-bottom: none;
  line-height: 30px;
  padding: 0 15px;
  margin-right: 3px;
  cursor:pointer;
}
.current{background:#abcdef;color:#fff;}
.tabConntent div{
  padding-top: 15px;
  text-align: center;
  height:250px;width:300px;border: 1px solid #f60;
}
/* 三个tab标签不同的背景颜色 */
.red{background-color:red;}
.blue{background-color:blue;}
.green{background-color:green;}
</style>
</head>
<body>

<div class="wrapper">
  <div class="tabTitle">
    <ul>
      <li class="current">html</li>
      <li>CSS</li>
      <li>jQuery</li>
    </ul>
  </div>
  <div class="tabConntent">
    <div>html的内容</div>
    <div class="hide">css的内容</div>
    <div class="hide">jQuery的内容</div>
  </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script>

$(function(){
  var divs = $(".tabConntent div");

  $(".tabTitle li").mouseover(function(){
    $(this).addClass('current').siblings().removeClass('current');
    var index = $(this).index(); // 索引
    divs.eq(index).show().siblings().hide();
  });

});

</script>
</body>
</html>


mouseover() 事件会遇到一个问题，

如果内容是请求服务器，一直在 tab 上晃鼠标会造成很多请求，需要用定时器做一个延迟

$(function(){
  var divs = $(".tabConntent div");
  var timer = null; // 定义一个timer

  $(".tabTitle li").mouseover(function(){
    var _that = $(this); // 定时器里回调函数里的this指向window，在这里保存一下指向当前元素的this// 定时器里回调函数里的this指向window，在这里保存一下指向当前元素的this
    var index = _that.index();

    // 1.每次鼠标进来开启定时器延迟，延迟三句核心代码
    timer = setTimeout(function(){
      _that.addClass('current').siblings().removeClass('current');
      divs.eq(index).show().siblings().hide();
    }, 500);
  }).mouseout(function(){
    // 2.鼠标移出清除定时器，这样下次鼠标移入后又重新开启新定时器
    clearTimeout(timer);
  });

});


希望三个 tab 标签鼠标移入后有不同颜色，需要三个不同的类样式

$(function(){
  var divs = $(".tabConntent div");
  var timer = null;
  $(".tabTitle li").mouseover(function(){
    var _that = $(this);
    var index = _that.index();
    timer = setTimeout(function(){
      _that.addClass(function(i){ // 修改这句代码，传一个回调函数
        if(index === 0){
          return 'current red'
        }else if(index === 1){
          return 'current blue'
        }else{
          return 'current green'
        }
        return 'current '
      }).siblings().removeClass(); // 不写参数会移除掉所有的样式

      divs.eq(index).show().siblings().hide();
    }, 500);
  }).mouseout(function(){
    clearTimeout(timer);
  });
});


二、一组图片的滚动

每张图片宽度 200 像素，四张图片，四个 li 的总宽度是 800 像素

.wrap 容器宽度为 800 像素

因为要用 js 复制一份 li 追加到 ul 里面，所以 ul 元素宽是 1600 像素


使用弹性盒模型的方式，

ul 元素不需要设置宽 1600，且不需要清除浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>multySlider</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_5225247_0cb1uve9rw2i.css" />
<style>
body,ul,li,div{padding:0;margin:0;}
li{list-style-type:none;}
.carousel-container{
  position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);
  border: 1px solid #eee;
}
.wrap{
  position:relative;
  height:150px;width:800px;
  overflow:hidden;
}
ul{
  display:flex; /*使用弹性盒模型*/
  position:absolute;top:0;left:0;
}
li{width:200px;}
li img{width:199px;height:150px;object-fit:cover;display: block;}

.iconfont {
  width:30px;height:30px;line-height:30px;text-align:center;
  position:absolute;top:50%;margin-top:-15px;
  z-index:10; /* 确保浮在图片上层 */
  background:rgba(0,0,0,0.3);font-size:12px;color:#ccc;
  border-radius:50%;cursor:pointer;}
.icon-xiangzuojiantou{left:5px;}
.icon-xiangyoujiantou{right:5px;}
</style>
</head>
<body>

<div class="carousel-container">
  <!-- 1.滚动视口（负责裁剪图片） -->
  <div class="wrap">
    <ul>
      <li><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic001.jpg"></li>
      <li><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic002.jpg"></li>
      <li><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic003.png"></li>
      <li><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic004.jpg"></li>
    </ul>
  </div>
  <!-- 2.左右按钮（与视口平级，绝对定位浮在上面，不受 overflow 影响） -->
  <span class="iconfont icon-xiangzuojiantou"></span>
  <span class="iconfont icon-xiangyoujiantou"></span>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

  // 获取ul里面的li，然后复制一份在添加到ul里面
  var ulInner = ul.html();
  // ul.append(ulInner); 使用append()要经过一个方法在添加进去，而且是jquery的方法，执行效率不如下面的字符串拼接高
  ul.html(ulInner + ulInner); // 这种字符串的拼接效率高

</script>
</body>
</html>


li 使用浮动布局

ul 要设置宽度，并清除浮动

使用浮动布局，如果增加滚动得图片数量，要重新设置 ul 的宽度，或在 js 代码里要重新设置 ul 的宽度

body,ul,li,div{padding:0;margin:0;}
li{list-style-type:none;}
.carousel-container{
  border: 1px solid #eee;
  position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);
}
.wrap{
  position:relative;
  height:150px;width:800px;
  overflow:hidden;
}
ul{
  overflow:hidden;_height:1px;/*清除浮动并兼容ie6*/
  width:1600px; /*设置宽度*/
  position:absolute;top:0;left:0;
}
li{width:200px;float:left;} /*浮动*/
li img{width:199px;height:150px;object-fit:cover;}


先了解什么是累加？

a+=1 在自身上值上在加 1 达到累加

翻译过来是 a = a+1


如果想要一个元素运动起来，

一般情况下这个元素要具有 position 属性，属性的值可以是 absolute/relative

不一般的情况下用 padding 或 margin 的值，但一般不推荐这种做法


ul 元素如何动起来

先设置 ul 元素 position:absolute

然后用 js 控制 left 值就动起来了，left 的值 +=-2px 累加

当 left 运动到 800 的时候一下子把 left 的值变成 0


向左滚动

$(function(){
  var ul = $(".wrap ul");
  var ulInner = ul.html();
  ul.html(ulInner + ulInner);
  var num = 0;

  setInterval(function(){
    num = Math.abs(parseInt(ul.css('left')));
    if(num >= 800){
      ul.css('left', 0);
    }
    ul.css('left', '+=-2px');
  },30);
});


向右滚动

+=2px 累加变成正数

left 的初始转态是 -800px

判断当 left 的值运动到 0 的时候，瞬间把 left 修改为 -800px

$(function(){
  var ul = $(".wrap ul");
  var num = 0;
  var ulInner = ul.html();
  ul.html(ulInner + ulInner);
  // ul.css('left', '-800px'); 设置left初始值默认是0，这里不用设置初始值
  setInterval(function(){
    num = Math.abs(parseInt(ul.css('left')));
    if(num === 0){
      ul.css('left', '-800px'); // 当left的值等于0到时候，瞬间移动得到-800px
    }
    ul.css('left', '+=2px');
  },30);
});


鼠标移到图片上停止滚动，移出后恢复滚动

$(function(){
  var ul = $(".wrap ul");
  var ulInner = ul.html();
  ul.html(ulInner + ulInner);
  var num = 0;
  var timer = null; // 定义一个定时器变量

  timer = setInterval(function(){
    num = Math.abs(parseInt(ul.css('left')));
    if(num === 0){
      ul.css('left', '-800px');
    }
    ul.css('left', '+=2px');
  },30);

  // 鼠标移除清除定时器
  $('.wrap').mouseover(function(){
    clearInterval(timer);
  }).mouseout(function(){
    // 鼠标移出这里，把上面滚动的代码复制一份
    timer = setInterval(function(){
      num = Math.abs(parseInt(ul.css('left')));
      if(num === 0){
        ul.css('left', '-800px');
      }
      ul.css('left', '+=2px');
    },30);
  });
});


点击按钮向左滚动或向右滚动

1. 把滚动的核心代码放到一个 slider 函数里面

2. 固定运动速率 2，定义为变量 speed

3. 修改混动方向的时候，只修改 speed 正数或负数

$(function(){
  var ul = $(".wrap ul");
  var leftNum = 0;
  var ulInner = ul.html();
  ul.html(ulInner + ulInner);
  var timer = null;
  var speed = -2; // 2.定义运动速率

  function slider(){ // 1.运动的核心代码放到函数里
    leftNum = Math.abs(parseInt(ul.css('left')));
    if(speed < 0){
      if(leftNum === 800){
        ul.css('left', '0px'); 
      }
    }
    if(speed > 0){
      if(leftNum === 0){
        ul.css('left', '-800px');
      }
    }
    ul.css('left', '+='+ speed +'px'); // 3.定义的运动速率替换到这里
  }

  timer = setInterval(slider,30); // 4.定时器里执行函数

  $('.wrap').mouseover(function(){
    clearInterval(timer);
  }).mouseout(function(){
    timer = setInterval(slider,30);
  });

  // 4.修改方向，只需要改变速率speed正数或负数
  $('.icon-xiangzuojiantou').click(function(){
    speed = -2;
  });
  $('.icon-xiangyoujiantou').click(function(){
    speed = 2;
  });
});


增加图片的数量，代码要自动适应

1. 获取 ul 的宽度

2. ul 的宽度除 2，替换到代码中的两个地方

3. 增加图片后 li 多了，重新设置一下 ul 行间宽度

$(function(){
  var ul = $(".wrap ul");
  var leftNum = 0;
  var ulInner = ul.html();
  ul.html(ulInner + ulInner);
  var timer = null;
  var speed = -2;

  // 1.获取ul的宽
  var lis = $('.wrap ul li'); // 获取所有的li
  var liWidth = lis.eq(0).width(); // 获取一个li的宽
  var liSize = lis.size(); // 获取li的数量
  var ulWidth = liWidth * liSize; // 计算出ul的宽

  $('.wrap ul').width(ulWidth); // 3.为了防止ul的宽小于总li的宽，这里按照图片个数重新设置一下ul的宽

  function slider(){
    leftNum = Math.abs(parseInt(ul.css('left')));
    if(speed < 0){
      if(leftNum === ulWidth/2){ // 2_a.800替换为ulWidth/2
        ul.css('left', '0px'); 
      }
    }
    if(speed > 0){
      if(leftNum === 0){
        ul.css('left', -ulWidth/2 +'px'); // 2_b.-800替换为-ulWidth/2
      }
    }
    ul.css('left', '+='+ speed +'px');
  }

  timer = setInterval(slider,30);

  $('.wrap').mouseover(function(){
    clearInterval(timer);
  }).mouseout(function(){
    timer = setInterval(slider,30);
  });

  $('.icon-xiangzuojiantou').click(function(){
    speed = -2;
  });
  $('.icon-xiangyoujiantou').click(function(){
    speed = 2;
  });
});


自己写的代码

点击按钮改变滚动方向，没有用到修改 speed 的方法，比较繁琐

$(function(){
  var ul = $(".wrap ul");
  var leftNum = 0;
  var ulInner = ul.html();
  ul.html(ulInner + ulInner);
  var timer = null;
  var direction = 0; // 定义滚动方向

  function Slider(direction){
    console.log(direction)
    timer = setInterval(function(){
      leftNum = Math.abs(parseInt(ul.css('left')));
      if(direction){
        if(leftNum === 0){
          ul.css('left', '-800px');
        }
        ul.css('left', '+=2px');
      }else{
        if(leftNum >= 800){
          ul.css('left', '0px');
        }
        ul.css('left', '+=-2px');
      }
    },30);
  }

  Slider(0);

  $('.wrap').mouseover(function(){
    clearInterval(timer);
  }).mouseout(function(){
    Slider(direction)
  });
  $('.icon-xiangzuojiantou').click(function(){
    clearInterval(timer);
    direction = 0;
    Slider(direction);
  });
  $('.icon-xiangyoujiantou').click(function(){
    clearInterval(timer);
    direction = 1;
    Slider(direction);
  });
});


三、无限轮播图

轮播图的经典 html 结构

1. 移动 ul 元素要设置 position: absolute

2. ul 相对 .wrapper 定位运动，外面还有的一层 .container 元素

3. js 复制第一张图片放到最后一张的位置，并重新设置 ul 的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slider</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_5225247_0cb1uve9rw2i.css" />
<style>
body,ol,ul,li,div,p{padding:0;margin:0;}
li{list-style-type:none;}
.container{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.wrapper{
  width:500px;height:350px;
  overflow: hidden;
  position:relative;}
.wrapper ul{width:2000px;position:absolute;left:0;top:0;}
.wrapper li{
  width:500px;
  float:left;}
.wrapper img{height:350px;}
/* 滚动时候显示的文字 */
.introduce{
width:500px;
position:absolute;bottom:0;left:1px;
text-indent:16px;
line-height:32px;color:#ddd;font-size:14px;
background-color:rgba(0,0,0,.2);
/*opacity:0.2;filter: alpha(opacity=20);透明度兼容ie6，但文字也透明了*/}
/* 索引 */
ol.indicators{position:absolute;bottom:5px;left:0;
width:100%;text-align:center;}
ol.indicators li{width:100%;
display:inline-block;margin:0 2px;width:10px;height:10px;
background-color:rgba(255, 255, 255, .3);border-radius:50%;cursor:pointer;}
ol.indicators .current{background-color:#fc0;}
/* 按钮 */
.iconfont {
  position:absolute;top:50%;margin-top:-15px;
  width:30px;height:60px;line-height:60px;text-align:center;
  z-index:10; /* 确保浮在图片上层 */
  background:rgba(0,0,0,0.5);font-size:12px;color:#fc0;cursor:pointer;}
.icon-xiangzuojiantou{left:1px;}
.icon-xiangyoujiantou{right:1px;}
</style>
</head>
<body>

  <div class="container">
    <div class="wrapper">
      <ul>
        <!-- 5张图片 -->
        <li class="item"><img alt="第一张金喜善" src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic001.jpg"/></li>
        <li class="item"><img alt="第二张图片" src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic002.jpg"/></li>
        <li class="item"><img alt="第三张图片" src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic003.png"/></li>
        <li class="item"><img alt="第四张图片" src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2025/pic/pic004.jpg"/></li>
        <li class="item"><img alt="jquery分类" src="http://ruyic.com/blog/uploads/image/202602/177088387326178.jpg"/></li>
      </ul>
    </div>
    <p class="introduce">第一张图片</p>
    <ol class="indicators">
      <!-- li的数量跟图片是同步的 -->
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <span class="iconfont icon-xiangzuojiantou"></span>
    <span class="iconfont icon-xiangyoujiantou"></span>
  </div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

  var ul = $('.wrapper ul'); // 获取ul元素
  var num = $('.wrapper ul li').size(); // 获取图片的数量
  var liWidth = $('.wrapper ul li').eq(0).width(); // 获取li的宽度
  
  // 复制第一张图片，然后插入到最后一张的位置上，并重新计算ul的宽度
  var list = $('.item img').eq(0).clone(true);
  $('<li class="item"></li>').append(list).clone(true).appendTo(ul);
  ul.width((num+1)*liWidth);

</script>
</body>
</html>


无限滚动核心

1. index 索引非常关键

2. 最后一张向后滚动时，滚动动画完毕后，做两件事

    left 瞬间移动到第一张的位置

    index 索引设置为 0

3. 第一张向前滚动时，滚动动画开始前，做两件事

    left 值设置显示最后一张，也就是复制加到最后的那张

    index 设置为最后一张

var ul = $('.wrapper ul');
var num = $('.wrapper ul li').size();
var liWidth = $('.wrapper ul li').eq(0).width();
var index = 0; // 1.定义索引并设置初始值（非常关键)
var timer = null; // 计时器
var lock = true; // 定义锁（默认打开)

var list = $('.item img').eq(0).clone(true);
$('<li class="item"></li>').append(list).clone(true).appendTo(ul);
ul.width((num+1)*liWidth);

// 滚动的核心函数slider
function slider(){
  ul.animate({left: -index*liWidth+'px'}, 500, function(){
    // 2.图片滚动到最后一张时进入判断（包括复制移动的一张)，动画运动完后同时做两件事件
    if(index === num){
      ul.css({'left': 0});
      index = 0;
    }
    // 根据索引index显示小圆点
    $('.indicators li').eq(index).addClass('current').siblings().removeClass();
  });
}

// 点击按钮向左滚动 ->>
$('.icon-xiangyoujiantou').click(function(){
  index++;
  slider();
});

// 点击按钮向右滚动 <<-
$('.icon-xiangzuojiantou').click(function(){
  index--;
  // 3.图片在第一张，向最后一张滚动时进去判断，动画运动前做两件事
  if(index < 0){
    ul.css({'left': -num * liWidth+'px'});
    index = num-1;
  }
  slider();
});

// 点击小点切换图片
$('.indicators li').click(function(){
  index = $(this).index();
  slider()
});


加锁功能

1. 锁默认打开

2. 进入运动前，关闭锁

3. 运动结束后，在打开锁

var ul = $('.wrapper ul');
var num = $('.wrapper ul li').size();
var liWidth = $('.wrapper ul li').eq(0).width();
var index = 0;
var timer = null;
var lock = true; // 1.定义锁（默认打开)

var list = $('.item img').eq(0).clone(true);
$('<li class="item"></li>').append(list).clone(true).appendTo(ul);
ul.width((num+1)*liWidth);

function slider(){
  ul.animate({left: -index*liWidth+'px'}, 500, function(){
    if(index === num){
      ul.css({'left': 0});
      index = 0;
    }
    $('.indicators li').eq(index).addClass('current').siblings().removeClass();
    // 3.动画运动后打开锁文件
    lock = true;
  });
}

$('.icon-xiangyoujiantou').click(function(){
  if(!lock){
    return;
  }
  lock = false; // 2.动画运动前关闭锁
  index++;
  slider();
});

$('.icon-xiangzuojiantou').click(function(){
  if(!lock){
    return;
  }
  lock = false; // 动画运动前关闭锁
  index--;
  if(index < 0){
    ul.css({'left': -num * liWidth+'px'});
    index = num-1;
  }
  slider();
});

$('.indicators li').click(function(){
  index = $(this).index();
  slider()
});


完成

1. 自动播放

2. 显示对应图片的说明文字，文字来源于图片的 alt 属性

var ul = $('.wrapper ul');
var num = $('.wrapper ul li').size();
var liWidth = $('.wrapper ul li').eq(0).width();
var index = 0;
var timer = null;
var lock = true;
var img = $('.wrapper ul img'); // 获取img元素
var imgAlt = ''; // 定义变量存储alt属性的值
var introduce = $('.introduce'); // 获取p元素

// 复制第一张图片添加到末尾的位置，重新计算并设置ul的宽度
var list = $('.item img').eq(0).clone(true);
$('<li class="item"></li>').append(list).clone(true).appendTo(ul);
ul.width((num+1)*liWidth);

// 运动函数
function slider(){
  ul.animate({left: -index*liWidth+'px'}, 500, function(){
    if(index === num){
      ul.css({'left': 0});
      index = 0;
    }
    $('.indicators li').eq(index).addClass('current').siblings().removeClass();
    imgAlt = img.eq(index).attr('alt'); // 获得图片alt属性的值
    introduce.text(imgAlt); // 将对应的图片说明文字添加到p元素
    lock = true;
  });
}

// 向右滚动
$('.icon-xiangyoujiantou').click(function(){
  if(!lock){
    return;
  }
  lock = false;
  index++;
  slider();
});

// 向左滚动
$('.icon-xiangzuojiantou').click(function(){
  if(!lock){
    return;
  }
  lock = false;
  index--;
  if(index < 0){
    ul.css({'left': -num * liWidth+'px'});
    index = num-1;
  }
  slider();
});

// 点击小点滚动到对应的图片
$('.indicators li').click(function(){
  index = $(this).index();
  slider()
});

// 自动切换图片
function autoSlider(){
  if(index === num){
    ul.css({'left': 0});
    index = 0;
  }else{
    index++;
  }
  slider()
}

// 自动轮播
timer = setInterval(autoSlider, 1500);

// 鼠标移入停止滚动
$('.container').hover(function(){
  clearInterval(timer);
}, function(){
  timer = setInterval(autoSlider, 1500);
});


四、手风琴菜单

原理与 tab 类似

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>accordionMenu</title>
<style>
body,dl,dt,dd,a{padding:0;margin:0;}
body{font-family: BPreplay, Arial, Helvetica, sans-serif;background:#302b23;}
a{text-decoration:none;color:#0196e3;outline:none;}
.Menu{width:240px;margin:80px auto 0 auto;}
.Menu dl{margin-bottom:10px;}
.Menu dl:first-child{margin-bottom:0px;}
.Menu dl dd{display:none;}
.Menu dl:first-child dt ~ dd{display:block;}
.Menu dl dt{cursor:pointer;line-height:44px;text-indent:16px;color #436800;font-size:21px;margin-bottom:5px;}
.Menu dl dd{background-color:#373128;border:1px solid #40392C;color:#CCCCCC;margin:5px 0;padding:4px 18px;font-size:13px;}
.Menu dl:nth-child(1) dt{background:linear-gradient(to top, #86c90e, #a0dc36);}
.Menu dl:nth-child(2) dt{background:linear-gradient(to top, #f25e14, #f77c2b);}
.Menu dl:nth-child(3) dt{background:linear-gradient(to top, #1f7ce6, #489bee);}
.Menu dl:nth-child(4) dt{background:linear-gradient(to top, #c02101, #f8611f);}
</style>
</head>
<body>

<div class="Menu">
  <dl>
    <dt>Kiwis</dt>
    <dd><a href="javascript:void(0);">Open Grapes Section</a></dd>
    <dd><a href="javascript:void(0);">Close This Section</a></dd>
    <dd><a href="javascript:void(0);">Read on Wikipedia</a></dd>
    <dd><a href="javascript:void(0);">Flickr Stream</a></dd>
  </dl>
  <dl>
    <dt>Oranges</dt>
    <dd><a href="javascript:void(0);">Open Grapes Section</a></dd>
    <dd><a href="javascript:void(0);">Wikipedia Page</a></dd>
    <dd><a href="javascript:void(0);">Flickr Photos</a></dd>
    <dd><a href="https://read.qq.com/chapter/1027614365">QQ 阅读</a></dd>
  </dl>
  <dl>
    <dt>Grapes</dt>
    <dd><a href="javascript:void(0);">Wiki page</a></dd>
    <dd><a href="javascript:void(0);">Text label</a></dd>
    <dd><a href="javascript:void(0);">Flickr Stream</a></dd>
    <dd><a href="https://www.ruanjianduo.top//">软件仓库</a></dd>
  </dl>
  <dl>
    <dt>Strawberries</dt>
    <dd><a href="javascript:void(0);">crop circles</a></dd>
    <dd><a href="javascript:void(0);">Iphone wallpaper</a></dd>
    <dd><a href="javascript:void(0);">Lanrentuku</a></dd>
    <dd><a href="https://www.iplaysoft.com/photoshop-web.html">web Photoshop </a></dd>
  </dl>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script>

  $.easing.def = 'easeOutElastic'; // 定义动画，后面所有的动画都是easeOutElastic效果

  $(".Menu dl dt").click(function(){
    var dls = $(this).nextAll().slideDown()
      .parent().siblings()
        .children('dd').slideUp();
  });

</script>
</body>
</html>


动画算法插件 jquery-easing

除了上面的用法，在 animate 方法里面可以定义其他效果

// .animate(porp, duration, easing, complete)

var m = 'easeOutBounce'; // 定义一个默认效果
ul.animate({'left': liWidth*index}, 1500, m) // 应用到这里，可以动态改变 m 的值



Leave a comment 0 Comments.

Leave a Reply

换一张