tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习

tab栏切换

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;}.tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;}.tab li {position: relative;float: left;width: 80px;height: 34px;line-height: 34px;text-align: center;cursor: pointer;border-top: 4px solid #fff;}.tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;}.products {width: 1002px;border: 1px solid #ddd;height: 476px;}.products .main {float: left;display: none;}.products .main.selected {display: block;}.tab li.active {border-color: red;border-bottom: 0;}</style><script src="jquery-1.12.1.js"></script><script>// 有些事现在不做,以后就没有机会了// 有些事现在不做,是为了以后做的更好// 页面加载的事件$(function(){// 获取所有的li标签,添加鼠标进入的事件$(".tab>li").mouseenter(function(){// 设置当前鼠标进入的li添加类样式,同时移除当前li的所有兄弟元素的// 类样式$(this).addClass("active").siblings("li").removeClass("active");// 设置鼠标进入的li对应的div的样式// 获取当前鼠标进入的li的索引值var index = $(this).index();$(".products>div:eq("+index+")").addClass("selected").siblings().removeClass("selected");});});</script></head>
<body>
<div class="wrapper"><ul class="tab"><li class="tab-item active">国际大牌<span>◆</span></li><li class="tab-item">国妆名牌<span>◆</span></li><li class="tab-item">清洁用品<span>◆</span></li><li class="tab-item">男士精品</li></ul><div class="products"><div class="main selected"><a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a></div></div>
</div></body>
</html>

动画的相关方法上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: mediumvioletred;}</style><script src="jquery-1.12.1.js"></script><script>/*** show和hide方法有参数* 参数1:时间----1000毫秒----1秒* 参数2:回调函数----动画执行完毕后才执行*/$(function(){// 点击第一个按钮显示div$("#btn1").click(function(){$("#dv").show(500,function(){alert('完了');});});// 点击第二个按钮隐藏div$("#btn2").click(function(){$("#dv").hide(500,function(){alert('好了');});});});</script>
</head>
<body>
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<div id="dv"></div></body>
</html>

动画的相关方法下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: mediumvioletred;}</style><script src="jquery-1.12.1.js"></script><script>/*** 参数和上面的是一样* slideDonw()滑出* slideUp()滑入* slideToggle()切换滑入和滑出* fadeIn() 淡入* fadeOut() 淡出* fadeToggle() 切换淡入和淡出* fadeTo(透明值开始,透明值结束):** slow 比较慢的* fast 比较快的* normal*/// $(function(){//     // 点击第一个按钮显示div//     $("#btn1").click(function(){//         // 滑出//         $("#dv").slideDown(500,function(){//           alert('显示了');//         });//     });//     // 点击第二个按钮隐藏div//     $("#btn2").click(function(){//         // 滑入//         $("#dv").slideUp(500,function(){//           alert('隐藏了');//         });//     });//     // 第三个按钮//     $("#btn3").click(function(){//         // 切换//         $("#dv").slideToggle(500,function(){//           alert("切换了");//         });//     });// });$(function(){// 点击第一个按钮显示div$("#btn1").click(function(){// 淡入$("#dv").fadeIn(500);});// 点击第二个按钮隐藏div$("#btn2").click(function(){// 淡出$("#dv").fadeOut(500);});// 第三个按钮$("#btn3").click(function(){// 切换// $("#dv").fadeToggle(500);// $("#dv").fadeTo(2000,0.2);$("#dv").fadeTo("fast",0.2);});});</script>
</head>
<body>
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<input type="button" value="切换" id="btn3">
<div id="dv"></div></body>
</html>

隐藏动画案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;}img {width: 90px;height: 90px;vertical-align: top;}</style><script>$(function(){// 第一个按钮,隐藏$("#btn1").click(function(){$("div>img:last").hide(500,function(){$(this).prev().hide(500,f1);});});// $("div>img:first").hide(500,function(){//     // arguments.callee少用,知道即可//     $(this).prev().hide(500,arguments.callee);// });// 第二个按钮,显示$("#btn").click(function(){$("div>img:first").show(500,function(){$(this).next().show(500,f1);});});});</script>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<input type="button" value="显示" id="btn">
<div><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt="">
</div></body>
</html>

隐藏动画练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){$("div").click(function(){// $(this).css("width","0px");$(this).hide(500);});});</script>
</head>
<body>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div></body>
</html>

tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习相关推荐

Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
WebAPI(part7)--Tab栏切换案例
学习笔记,仅供参考,有错必究 Web API Tab栏切换案例代码 <!DOCTYPE html> <html lang="en"><head> ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
1~22（面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换）
1 面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
DOM（二）：几个NB案例、属性操作（自定义属性）、tab栏切换（重难点）
这里写目录标题一.几个案例: 案例1:如何实现点击一个按钮亮,其余按钮全灭? 案例2:浏览器换肤效果案例3:表格隔行变色案例4:全选框和复选框(难的一塌糊涂) 我自己的逻辑: 老师操作小弟的逻辑 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
案例：tab 栏切换（重点案例）
案例:tab 栏切换(重点案例) 业务需求: 当鼠标点击上面相应的选项卡(tab),下面内容跟随变化. 案例分析: (1)Tab 栏切换有2个大的模块. (2)上面的模块选项卡,点击某一个,当前这一个 ...
前端——tab 栏切换案例
案例当鼠标点击上面相应的选项卡(tab),下面内容跟随变化分析 Tab栏切换有2个大的模块上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式下面的模块内 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...

tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习

tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习相关推荐

最新文章

热门文章

tab栏切换 动画的相关方法上 动画的相关方法下 隐藏动画案例 隐藏动画练习

tab栏切换 动画的相关方法上 动画的相关方法下 隐藏动画案例 隐藏动画练习相关推荐

最新文章

热门文章

tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习

tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习相关推荐