zookeeper python接口实例详解
201
2023-06-15
几种tab切换详解
1.鼠标移入移出切换
* {padding: 0;margin: 0;}
li {list-style: none;}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1140px;
}
.tabbox {
margin: 40px auto;
width: 400px;
height: 200px;
border: 1px solid #f70;
overflow: hidden;
}
.tabbox .tab-tit{
position: relative;
height: 40px;
}
ul {
position: absolute;
left: -1px;
width: 401px;
height: 40px;
line-height: 40px;
background-color: #eaeaea;
}
ul li {
float: left;
border-left: 1px solid #f70;
border-bottom: 1px solid #f70;
text-align: center;
width: 99px;
height: 40px;
overflow: hidden;
}
.clear {clear: both;}
.select {
padding-right: 1px;
border-bottom: none;
background-color: #fff;
}
a:link, a:visited {
font-size: 16px;
font-weight: bold;
color: #888;
text-decoration: none;
}
.select a {
color: #333;
}
a:hover, a:active {
color: #f20;
font-weight: bold;
}
.tab-txt {
width: 400px;
padding: 40px;
overflow: hidden;
}
.demo {display: none;}
.tab-txt p {
line-height: 40px;
}
我有两把枪,一把叫射,另一把叫,啊~
你有一双迷人的眼睛,我非常喜欢!
我去前面探探路
提莫队长正在待命!
放马过来吧,你会死的很光荣的!
快点儿结束吧,我头有点儿转晕了……
我的剑就是你的剑。
眼睛多,看东西才会更加清楚
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var tits = $("tabTit").getElementsByTagName("li");
var txts = $("tabTxt").getElementsByClassName("demo");
if(tits.length != txts.length) {return;}
for(var i=0,l=tits.length; i tits[i].id = i; tits[i].onmouseover = function() { for(var j=0; j tits[j].className = ""; txts[j].style.display = "none"; } this.className = "select"; txts[this.id].style.display = "block"; } } } 2.鼠标移入移出延时切换
* {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: bothhttp://;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; } 我有两把枪,一把叫射,另一把叫,啊~ 你有一双迷人的眼睛,我非常喜欢! 我去前面探探路 提莫队长正在待命! 放马过来吧,你会死的很光荣的! 快点儿结束吧,我头有点儿转晕了…… 我的剑就是你的剑。 眼睛多,看东西才会更加清楚 function $(id) { return typeof id === "string" ? document.getElementById(id) : id; } window.onload = function() { var timer = null; var tits = $("tabTit").getElementsByTagName("li"); var txts = $("tabTxt").getElementsByClassName("demo"); if(tits.length != txts.length) {return;} for(var i=0,l=tits.length; i tits[i].id = i; tits[i].onmouseover = function() { var that = this; if(timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function() { for(var j=0; j tits[j].className = ""; txts[j].style.display = "none"; } that.className = "select"; txts[that.id].style.display = "block"; },500); } } } 3. tab自动切换,鼠标移入移出立即切换
* {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: both;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; } 我有两把枪,一把叫射,另一把叫,啊~ 你有一双迷人的眼睛,我非常喜欢! 我去前面探探路 提莫队长正在待命! 放马过来吧,你会死的很光荣的! 快点儿结束吧,我头有点儿转晕了…… 我的剑就是你的剑。 眼睛多,看东西才会更加清楚 function $(id) { return typeof id === "string" ? document.getElementById(id) : id; } window.onload = function() { var index = 0; var timer = null; var tits = $("tabTit").getElementsByTagName("li"); var txts = $("tabTxt").getElementsByClassName("demo"); if(tits.length != txts.length) {return;} for(var i=0,l=tits.length; i tits[i].id = i; tits[i].onmouseover = function() { clearInterval(timer); styleFun(this.id); } tits[i].onmouseout = function() { timer = setInterval(autoPlay, 2000); } } //在开启定时器的同时清楚定时器并置空 if(timer) { clearInterval(timer); timer = null; } timer = setInterval(autoPlay, 2000); function autoPlay() { index++; if(index >= tits.length) { index = 0; } styleFun(index); } function styleFun(ele) { for(var j=0,m=tits.length; j tits[j].className = ""; txts[j].style.display = "none"; } tits[ele].className = "select"; txts[ele].style.display = "block"; //将鼠标移入移出时的index传给autoPlay; index = ele; } } 4. 广告栏切换实例
* { margin: 0; padding: 0; list-style: none; } .wrap { height: 170px; width: 490px; margin: 20px auto; overflow: hidden; position: relative; margin: 100px auto; } .wrap ul { position: absolute; } .wrap ul li { height: 170px; } .wrap ol { position: absolute; right: 5px; bottom: 10px; } .wrap ol li { height: 20px; width: 20px; background: #ccc; border: solid 1px #666; margin-left: 5px; color: #000; float: left; line-height: center; text-align: center; cursor: pointer; } .wrap ol .on { background: #E97305; color: #fff; } window.onload = function() { var wrap = document.getElementById('wrap'), pic = document.getElementById('pic'), piclist = pic.getElementsByTagName('li'), list = document.getElementById('list').getElementsByTagName('li'), picheight = 170, index = 0, timer = null; if(piclist.length != list.length) { return; } // 定义并调用自动播放函数 if(timer) { clearInterval(timer); timer = null; } timer = setInterval(picFunc, 2000); function picFunc() { index++; if(index >= piclist.length) { index = 0; } changePic(index); } // 定义图片切换函数 function changePic(ele) { for(var j = 0, m = piclist.length; j < m; j++) { list[j].className = ""; } pic.style.top = -ele * picheight + "px"; list[ele].className = "on"; index = ele; } // 鼠标划过整个容器时停止自动播放 wrap.onmouseover = function() { clearInterval(timer); } // 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout = function() { timer = setInterval(picFunc, 2000); } // 遍历所有数字导航实现划过切换至对应的图片 for(var i = 0, l = list.length; i < l; i++) { list[i].id = i; list[i].onmouseover = function() { changePic(this.id); } } }
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~