<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>焦点图片效果 - 吃了睡作</title> <style> div, ul, ol, li, dl, dt, dd { margin:0; padding:0; } .imgFlash,.tab{margin:auto}/*这句是为了居中的*/ /*-------------------------焦点图片的css----------------------*/ .imgFlash { height:230px;width:270px;/*整体的宽与高*/ position:relative; } .imgFlash dl { height:100%; overflow:hidden; position:absolute; width:100%; } .imgFlash img { height:100%; position:absolute; width:100%; background-color: #FFFFFF; background-image: url(http://www.hwj123.com/img/loading.gif); background-repeat: no-repeat; background-position: center center; } .imgFlash dt { bottom:0; font-size:12px; height:24px;line-height:24px;/*标题区域的高度*/ left:0; position:absolute; width:100%; z-index:1; } .imgFlash dt span {/*标题背景的样式*/ background-color:#000000; height:100%; opacity:0.4;filter:Alpha(Opacity=40); position:absolute; width:100%; } .imgFlash dt a { color:#FFFFFF; position:absolute; text-decoration:none; text-indent:5px; z-index:1; } .imgFlash dt a:hover { text-decoration:underline; } .imgFlash div { bottom:8px; cursor:pointer; display:block; position:absolute; right:8px; z-index:99999; } .imgFlash div em {/*未激活小方块的样式*/ background-color:#000000; border:1px solid #FFFFFF; display:block; float:right; height:4px; margin-right:3px; filter:Alpha(Opacity=50);opacity:0.5; overflow:hidden; width:4px; } .imgFlash div em.d {/*激活的小方块的样式*/ background-color:#CC0000; filter:Alpha(Opacity=80); opacity:0.8; } /*-------------------------Tab的css----------------------------*/ .tab,.tab ul{list-style-type: none;} .tab{ width:270px; background-color:#FFFFFF; height: 160px; font-size: 12px; position: relative; border-top-width: 30px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #0066FF; border-right-color: #0066FF; border-bottom-color: #0066FF; border-left-color: #0066FF; } .tab ul { position: absolute; top: -30px; } .tab li{ float:left; background-color:#A9CEEB; background-image:url(http://www.hwj123.com/img/b_l.gif); background-repeat:no-repeat; background-position:left top; margin-top:5px; margin-left: 5px; } .tab li.d { background-color: #FFFFFF; } .tab li a{text-decoration:none;display:block;padding-right:8px;padding-left:8px;line-height:25px;background-image:url(http://www.hwj123.com/img/b_r.gif);background-repeat:no-repeat;background-position:right top;color:#2B6FA2;} .tab li.d a{color:#0C3E74;} .tab li ul{ border-bottom-style:none; position:absolute; left:0px; top:30px; background-color: #FFFFFF; padding-top: 10px; width: 270px; } .tab li li{ float:none; background-image:none; margin:0px; background-color: #FFFFFF; } .tab li li a{ background-image:none; line-height:22px; color: #000000; float: none; height: 22px; } .tab li ul li a:hover{text-decoration:underline;} .tab li.d li a{color:#000000;} </style> <script language="javascript"> var $ = function (d){return document.getElementById( d );}; var isIE = (document.all) ? true : false; var Bind = function (obj,fun,arr){return function() {arr || (arr = arguments);return fun.apply(obj,arr);}};//绑定 var Tween = function(t,b,c,d){return c*t/d + b;};//缓冲函数 function addEventHandler(oTarget, sEventType, fnHandler) {if (oTarget.addEventListener) {oTarget.addEventListener(sEventType, fnHandler, false);} else if (oTarget.attachEvent) {oTarget.attachEvent("on" + sEventType, fnHandler);} else {oTarget["on" + sEventType] = fnHandler; } };//事件监听 function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } };//移除监听 ////////////////////////////////////////////// var Timer = {};//Timer Timer.add = function (fn){return new this.fn(fn)}; Timer.fn = function (fn){ var timer; this.play = function (speed,only){ speed || ( speed = 10 ); if(only)timer = window.setTimeout(fn,speed); else timer = window.setInterval(fn,speed); }; this.stop = function (){clearTimeout(timer);clearInterval(timer)}; }; //-----------------------------------Mask 遮罩动画 var Mask = function (){ this.fl = Timer.add(Bind(this,this.fn)); this.from_num = 0; this.speed = 50;//动画速度，越大越慢 }; Mask.prototype.ready = function (ele,pos){ if(this.ele)this.set(this.maxWidth,this.maxHeight); this.ele = ele; this.maxWidth = this.ele.offsetWidth; this.maxHeight = this.ele.offsetHeight; this.ele.style.position = "absolute"; this.from_num = 0; if(!pos){ var x = ["left","center","right",""][parseInt(4*Math.random())], y = ["top","center","bottom",""][parseInt(4*Math.random())]; if(x == "" && y == "")x = "left";//避免同时为"" this.position = [x,y]; }else{ this.position = pos; } this.set(0,0); this.fl.stop(); }; Mask.prototype.start = function (){this.fl.play();}; Mask.prototype.stop = function (){this.fl.stop();}; Mask.prototype.set = function (width,height){//设置遮罩的矩形，用于定位遮罩的变换方向 var t,r,b,l; switch(this.position[0]){ case "left" : l = 0; r = width; break; case "center" : l = (this.maxWidth - width)/2; r = (this.maxWidth + width)/2; break; case "right" : l = this.maxWidth - width; r = this.maxWidth; break; default: l = 0; r = this.maxWidth; } switch(this.position[1]){ case "top" : t = 0; b = height; break; case "center" : t = (this.maxHeight - height)/2; b = (this.maxHeight + height)/2; break; case "bottom" : t = this.maxHeight - height; b = this.maxHeight; break; default : t = 0; b = this.maxHeight; break; } this.ele.style.clip = "rect(" + t + "px," + r + "px," + b + "px," + l + "px)" ; }; Mask.prototype.fn = function (){ var w,h; this.from_num ++ ; if(this.from_num<=this.speed){ w = Tween(this.from_num,0,this.maxWidth,this.speed); h = Tween(this.from_num,0,this.maxHeight,this.speed); this.set(w,h); }else{ this.fl.stop(); //this.start();//若不需要重复动画，把这句注释，上句不注释 } }; function ImgFlash(box){ this.box = box.getElementsByTagName("dl"); this.ge = 4;//切换间隔秒数 this.menu = []; this.mask = new Mask();//加载遮罩动画，不设置参数 即 随机效果 this.zIndex = this.box.length; var _div = document.createElement('div'); this.dang = 0; for(i=0;i<this.zIndex;i++){ this.box[i].style.zIndex = this.zIndex-i; var _em = document.createElement('em'),_span = document.createElement('span'); var _dt = this.box[i].getElementsByTagName("dt")[0]; _dt.appendChild(_span); //_em = _em; addEventHandler(_em,'mouseover',Bind(this,this.emEvent,[this.zIndex-i-1,true])); _div.appendChild(_em); this.menu.push(_em); if(this.zIndex-i==1){ _em.className = 'd'; } } box.appendChild(_div); addEventHandler(box,'mouseover',Bind(this,function(){this.fl.stop()})); addEventHandler(box,'mouseout',Bind(this,function(){this.fl.play(this.ge*1000)})); this.fl = Timer.add(Bind(this,this.enterFrame)) this.fl.play(this.ge*1000); } ImgFlash.prototype.enterFrame = function(){ var ddd = this.dang==2?0:this.dang+1; this.emEvent(ddd); }; ImgFlash.prototype.emEvent = function (index,b){ if(b)this.fl.stop(); if(index == this.dang)return; this.menu[this.menu.length-1-this.dang].className=""; var odl = this.box[this.dang]; this.zIndex++; this.dang = index; this.menu[this.menu.length-1-this.dang].className="d"; var ndl = this.box[this.dang]; var img = ndl.getElementsByTagName("img")[0]; this.mask.ready(img); this.mask.start(); ndl.style.zIndex = this.zIndex; } /////////////////////////////////////////////以下是TAB的代码///////////////////////////////////////////////// function Tab(id,type){ var nav = id.getElementsByTagName("ul")[0].childNodes; var _nav,i=0; this.mask = new Mask();//初始化遮罩动画 this.z = 1000; while(_nav = nav[i++]){ if(_nav.className=="d")this.focusEle = _nav; if(_nav.childNodes.length>1){ var A = _nav.getElementsByTagName("A")[0]; addEventHandler(A,type,Bind(this,fun,[A])); } if(_nav.nodeType == 1)_nav.getElementsByTagName("UL")[0].style.zIndex = nav.length-i; } function fun(ele){ var li = ele.parentNode; var ul = li.getElementsByTagName("UL")[0]; this.z += 1 ul.style.zIndex = this.z; if(li.className=="d")return; //ele.blur();//解决虚线框问题 li.className+=(li.className.length>0? " ": "") + "d"; this.focusEle.className=this.focusEle.className.replace(/( ?|^)d\b/g, ""); this.focusEle = li; this.mask.ready(ul); this.mask.start(); //alert(li.getElementsByTagName("UL")[0].offsetHeight) }; } </script> </head> <body> <div class="imgFlash" id="box"> <dl> <dt><a href="#">桌面神探</a></dt> <dd><a href="#"><img src="/UploadFiles/SYDM/2009/11/200911161041404438.gif" border="0" /></a></dd> </dl> <dl> <dt><a href="#">让你的传真机</a></dt> <dd><a href="#"><img src="/UploadFiles/SYDM/2009/11/200911161041406785.gif" border="0" /></a></dd> </dl> <dl> <dt><a href="#">菜鸟也能制作flash动画</a></dt> <dd><a href="#"><img src="/UploadFiles/SYDM/2009/11/200911161041414483.gif" border="0" /></a></dd> </dl> </div> <br /> <br /> <br /> <br /> <div class="tab" id="tab1"> <ul> <li class="d"><a href="javascript:;">我可是美工</a> <ul> <li><a href="#">1. 什么是虚拟主机？ </a></li> <li><a href="#">2. 什么叫域名转向？</a></li> <li><a href="#">3. 域名与网址有什么区别？</a></li> <li><a href="#">4. 什么是Internet域名?</a></li> <li><a href="#">5. 如何查询我想要的域名能否注册...</a></li> <li><a href="#">6. 什么是域名解析？</a></li> </ul> </li> <li><a href="javascript:;">标题短点</a> <ul> <li><a href="#">1. SEO基本功，常用技巧。</a></li> <li><a href="#">2. 螳螂捕蝉：SEO与SPAM</a></li> <li><a href="#">3. SEO是什么？与spam有什么区别呢...</a></li> <li><a href="#">4. 什么是PV 什么是UV 什么是PR ?</a></li> <li><a href="#">5. 哈哈哈哈，不变换效果不好</a></li> <li><a href="#">6. 内容要变化啊！</a></li> </ul> </li> <li><a href="javascript:;">再短</a> <ul> <li><a href="#">1. 短了短了短了短了短了。</a></li> <li><a href="#">2. 内容不一样了啊，是的</a></li> <li><a href="#">3. 不懂不懂，我还是不懂...</a></li> <li><a href="#">4. 哦也哦有饿哦也 ?</a></li> <li><a href="#">5. 如何查嘿嘿要的能嘿嘿...</a></li> <li><a href="#">6. 哈哈是域名解析？</a></li> </ul> </li> <li><a href="javascript:;">短</a> <ul> <li><a href="#">1. 什么是内容不一样？ </a></li> <li><a href="#">2. 什么叫域名转向？</a></li> <li><a href="#">3. 域名与网址有什么区别？</a></li> <li><a href="#">4. 什么是Internet域名?</a></li> <li><a href="#">5. 如何查询我想要的域名能否注册...</a></li> <li><a href="#">6. 什么是域名解析？</a></li> </ul> </li> </ul> </div> <script> new ImgFlash($("box"));//初始化 new Tab($("tab1"),"mouseover"); </script> </body> </html>
