<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>折叠-TAB切换-焦点图</title> <style type="text/css"> html,body,div,ul,li,h3,p{margin:0; padding:0;} ul,li{list-style:none;} body{font:12px/1.8 "宋体",serif; text-align:left;} .clear:after{content:"";height:0; display:block; clear:both; visibility:hidden;} .content{border-bottom:1px solid #ddd;} .set{900px; padding:20px; float:left; } #toggle{200px; margin:20px; float:left;} .toggle_tit{border:1px solid #d0d0d0; background-image:url(image/2.png);background-position:3px 50%; background-repeat:no-repeat; text-indent:20px; cursor:pointer;} .toggle_tit_visited{background-image:url(image/1.png);} .toggle_con{border:1px solid #d0d0d0; border-top:none; height:120px;} #tab{200px; margin:20px; float:left;} .tab_tit{40px; height:24px; line-height:24px; float:left; border:1px solid #999; text-align:center; cursor:pointer;} #tab .wrap{margin-top:-1px;border:1px solid #999;} .tab_con{height:120px; padding:12px 6px;} #focus{200px; height:150px; padding:2px; float:left; margin:20px; border:1px solid #999; position:relative;} #focus ul{height:20px; position:absolute;bottom:10px; right:10px;} .focus_item{display:inline-block; 18px; height:18px; cursor:pointer; border:1px solid #666; background:#fff; text-align:center;} .focus_item_visited{background:#666; border:1px solid #fff; color:#fff;} #focus img{200px; height:150px;} </style> <script type="text/javascript"> function id(name){ return typeof name == "string" ? document.getElementById(name) : name; } function hasClass(name, type, elem) { var r = []; var re = new RegExp("(^|\\s)" + name + "(\\s|$)"); var e = (elem ? id(elem) : document).getElementsByTagName(type || "*"); for (var i = 0; i < e.length; i++) { if (re.test(e[i].className)) r.push(e[i]); } return r; } var ttf = function(options){ this.setOptions = function(options){ return { name:options["name"] || "", item:options["item"] || "", con:options["con"] || "", event:options["event"] || "click", visited:options["visited"] || "", initCon:options["initCon"] || "none", other:options["other"] || "hide", autorun:options["autorun"] || "", setTime:options["setTime"] || "2000", callback:options["callback"] || "" } } this.options = this.setOptions(options); this.init = function(){ this.name = id(this.options.name); this.item = hasClass(this.options.item,"",this.name); this.con = hasClass(this.options.con,"",this.name); this.currentItem = 0; this.autorunTimer = null; if(!this.name || this.item.length == 0 || this.con.length == 0){ return; } this.resetCon(); if(typeof this.options.initCon == "number"){ this.ctlCon(this.options.initCon - 1); }else if(this.options.initCon == "show"){ for(var i = 0,j=this.con.length;i<j;i++){ this.con[i].style.display = ""; } }; this.autorunFn(); this.setIndex(); } this.setIndex = function(){ var _this = this; for (var i = 0, j = this.item.length; i < j; i++) { (function(n) { _this.item[n]["on" + _this.options.event] = function() { if (_this.options.autorun) { clearTimeout(_this.autorunTimer); _this.autorunTimer = null; } _this.ctlCon(n); _this.currentItem = n + 1 == j ? 0: n + 1; setTimeout(function() { _this.autorunFn() }, _this.options.setTime); } })(i); }; } this.ctlCon = function(index){ if(this.options.other == "hide"){ this.resetCon(); } if(this.con[index].style.display == "none"){ this.con[index].style.display = ""; }else{ this.con[index].style.display = "none"; } if (this.options.visited) { this.ctlItem(index); } if(this.options.callback){ this.options.callback.call(this,index); } } this.ctlItem= function(index) { if(this.item[index].className.indexOf(this.options.visited) != -1){ var defaultClass = this.item[index].className.split(this.options.visited).join(""); }else{ var defaultClass = this.item[index].className; } if(this.options.other == "hide"){ for(var i = 0,j=this.item.length;i<j;i++){ this.item[i].className = defaultClass; } } if(this.con[index].style.display =="none"){ this.item[index].className = defaultClass; }else{ this.item[index].className = defaultClass +" "+this.options.visited; } }, this.resetCon = function(){ for(var i = 0,j=this.con.length;i<j;i++){ this.con[i].style.display = "none"; } } this.autorunFn = function(){ if(this.options.autorun){ var _this = this; this.ctlCon(this.currentItem); this.ctlItem(this.currentItem); this.currentItem > this.item.length - 2 ? this.currentItem = 0 : this.currentItem++; this.autorunTimer = setTimeout(function() { _this.autorunFn(); }, _this.options.setTime); } } this.init(); } </script> </head> <body> <div class="content clear"> <div id="toggle"> <div class="toggle_tit">toggle_1</div> <div class="toggle_con">toggle_1_con</div> <div class="toggle_tit">toggle_2</div> <div class="toggle_con">toggle_2_con</div> <div class="toggle_tit">toggle_3</div> <div class="toggle_con">toggle_3_con</div> </div> <div class="set"> <h3>应用于折叠层</h3> <p>调用方法</p> <code>new ttf({"name":"toggle","item":"toggle_tit","con":"toggle_con","initCon":1,"visited":"toggle_tit_visited","other":"hide"});</code> <p>想要展开当前的同时，其它状态不变，修改"other"值为"show"。</p> <p>想要初始化时确定哪一项展开，修改"initCon"值为有效数字</p> <p><label></label></p><input type="button" value="查看效果" onclick="toggle.options.other = 'show'" /> </div> </div> <div class="content clear"> <div id="tab"> <ul class="clear"> <li class="tab_tit">tab_1</li> <li class="tab_tit">tab_2</li> </ul> <div class="wrap"> <div class="tab_con">con_1</div> <div class="tab_con">con_2</div> </div> </div> <div class="set"> <h3>应用于选项卡</h3> <p>调用方法</p> <code> new ttf({"name":"tab","item":"tab_tit","con":"tab_con","initCon":1,"callback":function(){ for(var i = 0,j=this.item.length;i>j;i++){ this.item[i].style.borderBottomColor = "#999"; } this.item[arguments[0]].style.borderBottomColor = "#fff"; }}); </code> <p>本例使用callback函数来改变tab的样式。</p> <p>"event"设置鼠标事件类型，"event":"mouseover"改为鼠标划过。</p> <input type="button" value="改为划过" onclick="tab.options.event = 'mouseover';tab.init();" /> </div> </div> <div class="content clear"> <div id="focus"> <ul class="clear"> <li class="focus_item">1</li> <li class="focus_item">2</li> <li class="focus_item">3</li> <li class="focus_item">4</li> </ul> <div class="wrap"> <div class="focus_con"><img src="image/l1.jpg" tit="图1" /></div> <div class="focus_con"><img src="image/l2.jpg" tit="图2" /></div> <div class="focus_con"><img src="image/l3.jpg" tit="图3" /></div> <div class="focus_con"><img src="image/l4.jpg" tit="图4" /></div> </div> </div> <div class="set"> <h3>应用于选项卡</h3> <p>调用方法</p> <code> new ttf({"name":"focus","item":"focus_item","con":"focus_con","initCon":1,"visited":"focus_item_visited","autorun":true});; </code> <p>本例使用了自动播放，改修"autorun"值为"null"，停止播放。</p> <input type="button" value="停止播放" onclick="iFocus.options.autorun = null;" /> </div> </div> <script type="text/javascript"> var toggle = new ttf({"name":"toggle","item":"toggle_tit","con":"toggle_con","initCon":1,"visited":"toggle_tit_visited","other":"hide"}); var tab = new ttf({"name":"tab","item":"tab_tit","con":"tab_con","initCon":1,"callback":function(){ for(var i = 0,j=this.item.length;i<j;i++){ this.item[i].style.borderBottomColor = "#999"; } this.item[arguments[0]].style.borderBottomColor = "#fff"; }}); var iFocus = new ttf({"name":"focus","item":"focus_item","con":"focus_con","initCon":1,"visited":"focus_item_visited","autorun":true}); </script> </body> </html>