jQuery实现图片的隐藏、显示、切换
2016-12-06 11:30
841 查看
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-2.2.4.min.js"></script>
<script>
$(function() {
//获取按钮并设置点击事件
$("button").click(function() {
switch($(this).html()) {
case "隐藏":
$("img").hide(500);
break;
case "显示":
//显示
//$("img").show(500);
//下来效果显示
$("img").slideDown(1000);
break;
case "切换":
//$("img").toggle(500);
//渐变效果切换
$("img").fadeToggle("slow");
break;
}
});
});
</script>
</head>
<body>
<h2 id="hid">jQuery实例:特效</h2>
<button>隐藏</button>
<button>显示</button>
<button>切换</button><br/><br/>
<img src="./images/22.jpg" width="300" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 实现背景图片循环切换，显示隐藏div
- Jquery实现点击切换图片并隐藏显示内容
- Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
- Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
- 用jQuery实现一些导航条切换，显示隐藏
- Jquery实现图片的显示和隐藏
- 原生JS实现隐藏显示图片 JS实现点击切换图片效果
- 用jQuery实现一些导航条切换,显示隐藏的实例代码
- jquery简单图片切换显示效果实现方法
- 用jQuery实现一些导航条切换，显示隐藏
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- jQuery点击按钮实现div的隐藏和显示切换效果
- 显示隐藏切换同时变化文字jquery与js实现
- jQuery实现的导航条切换可显示隐藏
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- jQuery实现切换隐藏与显示同时切换图标功能
- jquery 实现横向滑动自动切换源码（同时显示多张图片）
- jquery简单图片切换显示效果实现方法