tab栏切换 动画的相关方法上 动画的相关方法下 隐藏动画案例 隐藏动画练习
生活随笔
收集整理的這篇文章主要介紹了
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栏切换 动画的相关方法上 动画的相关方法下 隐藏动画案例 隐藏动画练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 元素的样式设置 元素类样式的操作 开关灯
- 下一篇： animate方法 jQuery中元素的