仿2010世博会主页焦点flash [复制链接]

KOEN301　楼主

银牌会员 

帖子: 454
体力: 1060
威望: 9
居住地: 广东省广州市

发表于 2010-5-8 23:03:05 |显示全部楼层

本次更新对比旧版本精简了一半以上的代码（可以对比一下），强烈推荐喜欢的朋友更新。
如果说之前版本仿2010世博会flash的仿似度是90%，那么本次更新的仿似度则达到了99%，则是说几乎是一摸一样的（欢迎大家挑刺^_^）
其实本次更新只是日后将要发布的myFocus焦点图库的一款样式，也算是其发布前的一次预热吧，呵呵~~
总之，即将发布的myFocus正式版值得大家期待~~^^

7.5更新的代码：

<!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>myFocus v0.8</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://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片4，更多精彩请点击进入我的空间^^" /></a></li>
    </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

===========原贴============

不知大家发现没有，最近腾讯有关的网站焦点flash都是类似2010上海世博主页的那种格式，而且百度贴吧主页也做成了这样的格式，貌似很流行哦？。。遗憾的是它们都是flash做的，或是基于jquery库/IE滤镜(只模仿了渐变)，找遍网络好像都找不到我想要的JS格式，只好自己动手做一个。看效果（已更新，共4款）：

<!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>JS仿2010世博会主页焦点flash V2.1</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myFocus{width:450px;height:296px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}/*焦点图大小，可按需要是否加边框*/
#myFocus .loading{position:absolute;z-index:9999;width:450px;height:296px;background:#fff url(http://nethd.zhongsou.com/wtimg/i_158290/15250-loading.gif) center -40px no-repeat;color:#666;font-size:12px;text-align:center;padding-top:90px;}/*载入画面*/
#myFocus .pics li{position:absolute;top:0px;left:0px;}
#myFocus .pics li img{filter:alpha(opacity=0);opacity:0;width:450px;height:296px;}/*图片大小*/
#myFocus .ts li{position:absolute;z-index:2;left:0;bottom:-32px;height:32px;line-height:32px;padding-left:16px;overflow:hidden;}
#myFocus .ts li a{color:#fff;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
#myFocus .tsBg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/
#myFocus .btn,#myFocus .btnBg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;font-size:12px;}/*按钮样式*/
#myFocus .btn li,#myFocus .btnBg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;cursor:pointer;}
#myFocus .btnBg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;}/*按钮背景*/
#myFocus .btn li.current,#myFocus .btn li.hover {background:#F60;}/*当前/悬停按钮背景*/
</style>
<script type="text/javascript">
/*design by koen @ 10nian5yue8ri*/
/*http://hi.baidu.com/koen_li*/
function setMyFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
function poptit(n){//文字上下运动函数
	var ts = $$('li',tit);
	var H = ts[n].clientHeight;
	var setway=function(obj,y){obj.style.bottom=y+'px';}
	var getway=function(obj){return parseInt(obj.style.bottom);}
	var y1,y2;
	var up=function(){
		y1=getway(ts[n]);
		if (ts[n].movement) clearTimeout(ts[n].movement);//为了兼容变化中的点击
		if (y1 == 0) return true;
		y1+=Math.ceil((0 - y1) / 5);
		setway(ts[n],y1);
		if(y1<0) ts[n].movement = setTimeout(up, 1);
	}
	var down=function(){
		y2=getway(ts[N]);
		if (ts[N].movement) clearTimeout(ts[N].movement);
		if (y2 == -H) return true;
		y2+=Math.floor((-H - y2) / 5);
		setway(ts[N],y2);
		if(y2>-H) ts[N].movement = setTimeout(down, 1);
	}
	for(var i=0;i<ts.length;i++){
		if (!ts[i].style.bottom) ts[i].style.bottom = -H+'px';
		if(ts[i].name=='up') var N=i;
	}
	if(!N&&n==0) {//开始载入...
		ts[n].name='up';
		var y1=getway(ts[n]);
		up();
		return true;
	} 
	if(N==n) return true;//防止快速移出移入的抖动
	ts[N].name=''//标记淡入的name为空
	ts[n].name='up';
	down();
	up();
}
function opa(n){//图片淡入淡出函数
	var pics = $$('img',pic);
	var setfade=function(obj,o){
		if (document.all) obj.style.filter = "alpha(opacity=" + o + ")";
		else obj.style.opacity = (o / 100);
	};
	var getfade=function(obj){
		return (document.all)?((obj.filters.alpha)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false);
	}
	var show=function(){
		if(pics[n].move) clearTimeout(pics[n].move);
		if (o1 >= 100) return true;
		o1+=5;
		setfade(pics[n],o1);
		pics[n].move=setTimeout(show,1);
	};
	var hide=function(){
		if(pics[N].move) clearTimeout(pics[N].move);
		if (o2 <= 0) {pics[N].style.display='none';return true;}
		o2-=5;
		setfade(pics[N],o2);
		pics[N].move=setTimeout(hide,1);
	};
	for(var i=0;i<pics.length;i++){
		if(!getfade(pics[i])) {setfade(pics[i],0);pics[i].style.display='none';}
		if(pics[i].name=='out') var N=i;
	}
	if(!N&&n==0) {//开始载入...
		pics[n].name='out';
		pics[n].style.display='';
		var o1=getfade(pics[n]);
		show();
		return true;
	}
	if(N==n) return true;
	pics[N].name=''
	pics[n].name='out';
	pics[n].style.display='';
	var o1=getfade(pics[n]);
	var o2=getfade(pics[N]);
	hide();
	show();
}
function classNormal() {//数字标签样式清除
    var focusBtnList = $$('li',btn);
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function autoFocusChange() {//自动运行
    if (atuokey) return;
    var focusBtnList = $$('li',btn);
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }
	if(currentNum<focusBtnList.length-1){
		poptit(currentNum+1);
		opa(currentNum+1);
       	classNormal();
       	focusBtnList[currentNum+1].className = 'current';
	}else if(currentNum==focusBtnList.length-1){
		poptit(0);
		opa(0);
       	classNormal();
       	focusBtnList[0].className = 'current';
	}
}
function focusChange() {//交互切换
    var focusBtnList = $$('li',btn);
    for (var i = 0; i < focusBtnList.length; i++) {
		focusBtnList[i].I=i;
		focusBtnList[i].onclick = function(){
        	poptit(this.I);
			opa(this.I);
        	classNormal();
        	focusBtnList[this.I].className = 'current';
		}
		focusBtnList[i].onmouseover = function(){
			if(!this.className) this.className = 'hover'
		}
		focusBtnList[i].onmouseout = function(){
			if(this.className=='hover') this.className ='';
		}
	}
}
function init(){//初始化
	$(ID).removeChild($$('div',ID)[2]);
	opa(0);
	poptit(0);
    classNormal();
    $$('li',$$('div',ID)[4])[0].className = 'current';
	$(ID).onmouseover = function() {
        atuokey = true;
		clearInterval(auto);
    }
    $(ID).onmouseout = function() {
        atuokey = false;
		auto=setInterval(autoFocusChange, T);
    }
}
var ul=$$('ul',ID)[0];
var li=$$('li',ul);
var NUM=li.length;
var s1='<div class="tsBg"></div><div class="btnBg"><ul>';for(var i=0;i<NUM;i++){s1+='<li></li>'};s1+='</ul></div>';
var s2='<div class="ts"><ul>';
for(var i=0;i<NUM;i++){var a=$$('a',li[i])[0];var img=$$('img',li[i])[0];s2+='<li><a href="'+a.href+'">'+img.alt+'</a></li>'};s2+='</ul></div>';
var s3='<div class="btn"><ul>';
for(var i=0;i<NUM;i++){s3+='<li>'+(i+1)+'</li>'};s3+='</ul></div>';
$(ID).innerHTML=s1+$(ID).innerHTML+s2+s3;
//生成HTML结束
var pic=$$('div',ID)[3];
var tit=$$('div',ID)[4];
var btn=$$('div',ID)[5];
var atuokey = '';
var auto='';
var T=t*1000;//每帧图片停留的时间，1000=1秒
	init();
	focusChange();
	auto=setInterval(autoFocusChange, T);
}
window.onload=function(){
	setMyFocus('myFocus',3)
}
</script>
</head>
<body>
<div id="myFocus">
<div class="loading">请稍候...</div>
<div class="pics">
	<ul>
    	<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片4，更多精彩请点击进入我的空间^^" /></a></li>
    </ul>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

因为本人JS水平有限，制作过程遇到很多问题都是通过搜索或在这里提问，后来发现原来论坛早已有人做过类似的：http://bbs.blueidea.com/thread-2911266-1-3.html，但幸好，还不是完全相同的^_^。例如：朋友那个是一帧跟着一帧运动，而我这个是2帧甚至多帧的同时运动(如果你点击的足够快)，所要处理/考虑的情况比朋友那个要复杂的多，这也是代码有点多的最大原因。当然，这个开始的loading切入我是模仿这位朋友的，希望不要介意^_^。

使用说明(5.12更新)：直接复制套用或调用setMyFocus(ID,t);即可（ID为焦点容器id，t为每帧停留时间单位秒）；其余的包括更改焦点图大小、添加更多的帧或自定义样式等等只需修改HTML/CSS，无需修改参数/JS代码，如添加一帧/图片只需在HTML中增加一行“<li>(你的图片)</li>”即可。HTML结构如下：

<div id="myFocus">
<div class="loading">请稍候...</div>
<div class="pics">
<ul>
<li><a href="#"><img src="#" alt="图片1来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="#" alt="图片2来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="#" alt="图片3来源于网络，版权属于作者" /></a></li>
<li><a href="#"><img src="#" alt="图片4来源于网络，版权属于作者" /></a></li>
</ul>
</div>
</div>

复制代码

以上代码皆兼容包括IE系列、火狐系列、谷歌系列等现代浏览器，细心的网友可能会发现其在各个浏览器中运行速度不同，其中谷歌、某些版本的火狐运行比较快、而IE8、某些版本的火狐运行慢一些，而我这个是在IE6中测试和作标准的，这个问题已经开帖请教经典论坛里的达人：http://bbs.blueidea.com/thread-2983483-1-2.html，但目前似乎没有解决的办法，如果朋友们有什么好的解决方案或程序发现什么bug、or进一步的优化代码，欢迎提出^_^

[ 本帖最后由 KOEN301 于 2010-10-10 22:07 编辑 ]

已有 1 人评分	威望	收起理由
cloudgamer	+ 1	谢谢分享

总评分: 威望 + 1 查看全部评分

		自动登录	找回密码
密码			注册

仿2010世博会主页焦点flash [复制链接]

浏览过的帖子

浏览过的版块