|
<!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=utf-8" />
<base href="http://hi.baidu.com/koen_li"><!--如果用到相对地址的样式或图片或文件，记得删除这行-->
<title>仿2010世博会主页焦点幻灯图片效果</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{background:#eee;padding:20px;}
.mF_expo2010{position:relative;width:450px;height:296px;overflow:hidden;font:12px/1.5 Verdana,Geneva,sans-serif;background:#fff;}
.mF_expo2010 .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:90px;background:#fff url(http://nethd.zhongsou.com/wtimg/i_158290/15250-loading.gif) center -40px no-repeat;}/*载入画面*/
.mF_expo2010 .pic li{position:absolute;}
.mF_expo2010 .pic li img{width:450px;height:296px;}/*图片和焦点图框架一样大小*/
.mF_expo2010 .txt li{position:absolute;z-index:2;left:0;width:450px;height:36px;line-height:36px;overflow:hidden;}
.mF_expo2010 .txt li a{display:block;color:#fff;padding:2px 0 0 16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
.mF_expo2010 .txt-bg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;overflow:hidden;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/
.mF_expo2010 .num,.mF_expo2010 .num-bg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;}/*按钮样式*/
.mF_expo2010 .num li,.mF_expo2010 .num-bg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;cursor:pointer;}
.mF_expo2010 .num-bg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;}/*按钮背景*/
.mF_expo2010 .num li.current,.mF_expo2010 .num li.hover{background:#F60;}/*当前/悬停按钮背景*/
</style>
<script type="text/javascript">
var myFocus={
//Design By Koen @ 2010.7.x
//http://hi.baidu.com/koen_li
//koen_lee@qq.com
$:function(id){return document.getElementById(id);},
$$:function(tag,obj){return (typeof obj=='object'?obj:this.$(obj)).getElementsByTagName(tag);},
linear:function(t,b,c,d){return c*t/d + b;},
easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;},
easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;},
opa:function(obj,v){
if(v!=undefined) {v=v>100?100:(v<0?0:v); obj.style.filter = "alpha(opacity=" + v + ")"; obj.style.opacity = (v / 100);}
else return (document.all)?((obj.filters.alpha)?obj.filters.alpha.opacity:100):((obj.style.opacity)?obj.style.opacity*100:100);
},
move:function(obj,dir,val,type,spd,fn){
var t=0,b=parseInt(obj.style[dir])||0,c=val-b,d=spd||50,st=type||'linear',m=c>0?'ceil':'floor';
if(obj[dir+'timer']) clearInterval(obj[dir+'timer']);
obj[dir+'timer']=setInterval(function(){
if(t<d){obj.style[dir]=Math[m](myFocus[st](t++,b,c,d))+'px';}
else {clearInterval(obj[dir+'timer']);fn&&fn.call(myFocus);}
},10);return this;
},
fade:function(obj,type,spd,fn){
var o=this.opa(obj),m=spd||5;
if(o==0) obj.style.display='';
if(type=='out') m=-m;
if(obj.fadeTimer) clearInterval(obj.fadeTimer);
obj.fadeTimer=setInterval(function(){
o+=m;myFocus.opa(obj,o);
if(o<=0) obj.style.display='none';
if(o>=100||o<=0){clearInterval(obj.fadeTimer);fn&&fn.call(myFocus);}
},10);return this;
},
addList:function(obj,cla,arr){
var s=[],n=this.$$('li',this.$$('ul',obj)[0]).length,num=cla.length;
for(var j=0;j<num;j++){
s.push('<ul class='+cla[j]+'>');
for(var i=0;i<n;i++){s.push('<li>'+(cla[j]=='num'?(i+1):(cla[j]=='txt'?this.$$('li',obj)[i].innerHTML.replace(/\<img.*?\>/i,this.$$('img',obj)[i].alt):''))+'<span></span></li>')};
s.push('</ul>');
}; obj.innerHTML+=s.join('');
},
setting:function(par){//设置DOM/文档加载就绪后执行的任务
if(window.attachEvent){window.attachEvent('onload',function(){myFocus[par.style](par)});}
else{window.addEventListener('load',function(){myFocus[par.style](par)},false);}
},
mF_expo2010:function(par){
var box=this.$(par.id),t=par.time*1000;
this.addList(box,['txt-bg','txt','num-bg','num']);
var pic=this.$$('ul',box)[0],txt=this.$$('ul',box)[2],num=this.$$('ul',box)[4],img=this.$$('li',pic),tip=this.$$('li',txt);
var H=tip[0].clientHeight+60;
var n=img.length;
var index=0;
for(var i=0;i<img.length;i++){this.opa(img[i],0); img[i].style.display='none'; tip[i].style.bottom=-H+'px'}
box.removeChild(this.$$('div',box)[0]);
this.fade(img[index],'in');
this.move(tip[index],'bottom',0,'easeOut',40)
this.$$('li',num)[index].className='current';
var run=function(idx){
myFocus.fade(img[index],'out');
myFocus.move(tip[index],'bottom',-H,'easeIn',10);
myFocus.$$('li',num)[index].className='';
if(index==n-1) index=-1;
var N=idx!=undefined?idx:index+1;
myFocus.fade(img[N],'in');
myFocus.move(tip[N],'bottom',0,'easeOut',40);
myFocus.$$('li',num)[N].className='current';
index=N;
}
var auto=setInterval(function(){run()},t);
for (var j=0;j<n;j++){
this.$$('li',num)[j].j=j;
this.$$('li',num)[j].onclick=function(){run(this.j)}
this.$$('li',num)[j].onmouseover=function(){if(!this.className) this.className = 'hover';}
this.$$('li',num)[j].onmouseout=function(){if(this.className=='hover') this.className ='';}
}
box.onmouseover=function(){clearInterval(auto);}
box.onmouseout=function(){auto=setInterval(function(){run()},t);}
}
}
myFocus.setting({style:'mF_expo2010',id:'myFocus',time:2});//style为风格样式，id为焦点图ID，time为每帧间隔时间(秒)
//之后推出的myFocus正式版将会有更多的样式、更强大的效果及更详细的文档描述，敬请期待!^_^
</script>
</head>
<body>
<div id="myFocus" class="mF_expo2010">
<div class="loading"><span>请稍候...</span></div><!--载入画面-->
<ul class="pic"><!--内容列表-->
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473748.jpg" alt="图片1来源于网络，版权属于作者" /></a></li><!--alt的内容为标题-->
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473748.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473787.jpg" alt="图片4，更多精彩请点击进入我的空间^^" /></a></li>
</ul>
</div>
</body>
</html> |
注册 登录
