jQuery打字机小练习
来源：互联网 发布：淘宝平面模特招聘 编辑：程序博客网 时间：2024/06/05 04:15
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>打字机</title>
<style>
div{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background: red;
color:#a7b5bc;
margin: 10px;
border-radius: 80px;
}
</style>
<script src="../jquery-1.8.2.js"></script>
<script>
$(function(){
//利用递归的思想来做打字机
$('button:first').on('click',function(){
$('div:first').slideDown(1000,function test(){
$(this).next().slideDown(1000,test)
})
})
$('button:last').on('click',function(){
$('div:last').slideUp(1000,function test(){
$(this).prev().slideUp(1000,test);
})
})
})
</script>
</head>
<body>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
<button >显示</button>
<button>隐藏</button>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>打字机</title>
<style>
div{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background: red;
color:#a7b5bc;
margin: 10px;
border-radius: 80px;
}
</style>
<script src="../jquery-1.8.2.js"></script>
<script>
$(function(){
//利用递归的思想来做打字机
$('button:first').on('click',function(){
$('div:first').slideDown(1000,function test(){
$(this).next().slideDown(1000,test)
})
})
$('button:last').on('click',function(){
$('div:last').slideUp(1000,function test(){
$(this).prev().slideUp(1000,test);
})
})
})
</script>
</head>
<body>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
<button >显示</button>
<button>隐藏</button>
</body>
</html>
阅读全文
0 0
- jQuery打字机小练习
- 小白练习打字机效果
- JQuery小练习
- JQuery小练习
- JQuery小练习
- JQuery小练习
- jQuery小练习
- JQuery小练习
- jQuery小练习1
- jQuery小练习3
- 0726-jQuery小练习
- jQuery的打字机效果
- Jquery打字机效果
- jquery实现打字机效果
- jQuery选项卡小练习
- [练习1] js 学习之打字机效果
- JQuery小练习（2009-08-03）
- JQuery小练习（2009-08-03）
- 【JavaScript避免重命名的方法】
- 成绩排序
- jQuery之事件与动画总结
- jq锚点联动
- Sublime text 3配置Lua环境
- jQuery打字机小练习
- CSS之background-position属性
- jQuery选项卡小练习
- 二维数组
- CentOS安装RabbitMQ
- 来到CSDN
- 什么是粉丝福利购？淘宝优惠券的来由。
- 【数据结构】C语言实现链表
- RTDT.js配置文件RTDTConf.js
