打印

仿china.nba.com焦点图效果(ie6,ff)

hansir [楼主]

老韩

银牌会员

帖子: 2753
体力: 2035
威望: 5
当前: 北京丰台区

专长 前端制作,JS,PHP

1^# 大中小发表于 2007-10-30 13:56

这几天无聊的很
看着china.nba.com焦点图效果捣鼓了一下有待完善!

<!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>
<TITLE>New Document</TITLE>
<style type="text/css">
	#fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(http://www.kuanghong.com/han/images/fours_bj.gif) repeat-x 0 bottom;}
	#f_img_roll{float:left;width:350px; height:300px; position:relative}
	#f_img_roll img{position:absolute; left:0; top:0}
	#f_img_s{float:right; position:relative; width:80px; height:300px;}
	#f_img_s ul{margin:0; padding:0; margin-left:6px; list-style:none;}
	#f_img_s li{width:60px; height:45px;border:1px solid #0066cc;margin-top:3px;}
    #f_img_s img{width:54px; height:39px; border:3px solid #000066;vertical-align:top; }
	#f_img_s div{top:3px}
	#f_mask{position:absolute; top:3px; right:12px; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}
	#f_title{font-size:16px; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
	
  </style>
  <script type="text/javascript">
	 //图片资源
	 var imgs_m=[],imgs_s=[],imgs_title=[];
		imgs_m[0]="http://www.kuanghong.com/han/images/img_1.jpg";
		imgs_m[1]="http://www.kuanghong.com/han/images/img_2.jpg";
		imgs_m[2]="http://www.kuanghong.com/han/images/img_3.jpg";
		imgs_m[3]="http://www.kuanghong.com/han/images/img_4.jpg";
		imgs_m[4]="http://www.kuanghong.com/han/images/img_5.jpg";
		imgs_m[5]="http://www.kuanghong.com/han/images/img_6.jpg";
		imgs_s[0]="http://www.kuanghong.com/han/images/img_1_0.jpg";
		imgs_s[1]="http://www.kuanghong.com/han/images/img_2_0.jpg";
		imgs_s[2]="http://www.kuanghong.com/han/images/img_3_0.jpg";
		imgs_s[3]="http://www.kuanghong.com/han/images/img_4_0.jpg";
		imgs_s[4]="http://www.kuanghong.com/han/images/img_5_0.jpg";
		imgs_s[5]="http://www.kuanghong.com/han/images/img_6_0.jpg";
		
		imgs_title[0]="第一张";
		imgs_title[1]="第二张";
		imgs_title[2]="第三张";
		imgs_title[3]="第四张";
		imgs_title[4]="第五张";
		imgs_title[5]="第六张";
	//显示小图
	function imgs_s_dis(){
		var imgs=document.getElementById("imgs");
		var fr=document.createDocumentFragment();
		for(var i=0;i<imgs_s.length;i++){
			var li=document.createElement("li");
				li.innerHTML="<img src='"+imgs_s[i]+"' alt='' />";
				lis.push(li);
				fr.appendChild(li);
		}
		imgs.appendChild(fr);
	}
	
	//图片切换
	function img_scroll(num){
		cur_img.src=imgs_m[num];
		img_title.innerHTML=imgs_title[num];
	}
	
	//图片切换效果
	 var ie=/MSIE/.test(navigator.userAgent);//浏览器
	 var img_title=null;//title
	 var f_img_roll=null;//大图
	 var cur_img=null;//当前大图
	 var mb_img=null;//目标图
	 var f_mask=null;//MASK层
	 var lis=[];//所有LI
	 var cur_li=null;//当前MASK所在LI
	 var mb_li=null;//目标LI位置
	 var tt=null;//时间函数
	 var m=0;//默认top
	 var r=0;//当前lis下标
	 
	 //自动播放
	 function img_play(){
		r++;
		if(r>lis.length-1)r=0;
		mb_li=lis[r].offsetTop;
		tt=setInterval("f_mask_mov()",25);
		cur_li=lis[r];
		img_scroll(r);
		
	 }
	
	 //加载动作
	 function _focus(){
		imgs_s_dis();//初始小图显示
		cur_li=lis[0];//初始当前mask所在元素
		f_img_roll=document.getElementById("f_img_roll");
		cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默认大图引用
		img_title=document.getElementById("f_title");
		f_mask=document.getElementById("f_mask");//得到MASK引用
		for(var i=0;i<lis.length;i++){
			lis[i].onmouseover=function(){
				this.style.border="1px solid #cc0000";
			}
			lis[i].onmouseout=function(){
				this.style.border="1px solid #0066cc";
			}
			lis[i].num=i;
			lis[i].onclick=function(){
				if(cur_li!=this){
					clearTimeout(ttt);//停止自动播放
					r=this.num;
					mb_li=this.offsetTop;
					tt=setInterval("f_mask_mov()",25);
					cur_li=this;
					img_scroll(this.num);
				}
			}
		}
		ttt=setTimeout("img_play()",3000);//开始自动播放
	 }
	 
	 //滑动效果
	 function f_mask_mov(){
		if(m>mb_li){
			m-=(m-mb_li)*0.2;
			if((m-1)<mb_li){
				clearTimeout(tt);
				f_mask.style.top=mb_li+"px";
				f_mask_top=mb_li;//更新M值
				m=mb_li;
				ttt=setTimeout("img_play()",3000);//开始自动播放
				return;
			}else{
				f_mask.style.top=m+"px";
			}
		}else{
			m+=(mb_li+5-m)*0.2;
			if(m>mb_li){
				clearTimeout(tt);
				f_mask.style.top=mb_li+"px";
				m=f_mask_top=f_mask.offsetTop;//更新M值
				ttt=setTimeout("img_play()",3000);//开始自动播放
				return;
			}else{
				f_mask.style.top=m+"px";
			}
		}
		
	 }
	 window.onload=_focus;
  </script>
</HEAD>
<BODY>
<div id="fours_m">
  <div id="f_img_roll"><img src="http://www.kuanghong.com/han/images/img_1.jpg" /></div>
  <div id="f_img_s">
    <div id="f_mask"></div>
    <ul id="imgs"></ul>
  </div>
  <div id="f_title">第一张</div>
</div>
</BODY>
</HTML>

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

本帖最近评分记录

cloudgamer 威望 +1 谢谢分享 2009-8-15 00:26

哪些歌曲最流行

TOP

西部数码分布式集群主机傲视群雄 | 韩国主机，快速稳定免备案，讯网科技

dorispanda

中级会员

帖子: 169
体力: 348
威望: 0
离线: 251 天

2^# 大中小发表于 2007-10-30 16:11

满好的。。

TOP

PSD网页模板下载,高端实用 | 免费自助建站

webagain

初级会员

帖子: 37
体力: 71
威望: 0
离线: 194 天

3^# 大中小发表于 2007-10-30 18:01

真不错！收藏！

TOP

kxm1984

中级会员

认证
帖子: 201
体力: 354
威望: 0
当前: 上海浦东

专长 网页设计,前端制作,JS

4^# 大中小发表于 2007-10-30 19:00

恭喜楼主

兼容性：IE6 , IE7 , Opera , FF , Netscape 全部兼容，楼主太有才了，哈哈，谢谢了，收藏了

TOP

amish

初级会员

帖子: 71
体力: 147
威望: 0
当前: 湖北孝感
离线: 66 天

5^# 大中小发表于 2007-10-30 23:22

真个不错

TOP

shine130

新手上路

帖子: 12
体力: 26
威望: 0
当前: 重庆巴南

6^# 大中小发表于 2007-11-15 16:40

不错.

TOP

piginlove

中级会员

帖子: 127
体力: 247
威望: 0
当前: 北京丰台区
离线: 40 天

专长 3D,CG,编辑

7^# 大中小发表于 2007-11-15 16:52

如果快速的连续点几下，就会死机了。。

ie6

TOP

universe2009

新手上路

帖子: 32
体力: 0
威望: 0
离线: 380 天

8^# 大中小发表于 2007-11-15 17:18

感觉不错！

TOP

binghexijian

中级会员

帖子: 197
体力: 384
威望: 0
当前: 福建泉州
离线: 20 天

9^# 大中小发表于 2007-11-15 18:54

引用:

原帖由 piginlove 于 2007-11-15 16:52 发表
如果快速的连续点几下，就会死机了。。

ie6

IE7也是

TOP

deline

新手上路

帖子: 7
体力: 12
威望: 0
当前: 浙江宁波
离线: 858 天

10^# 大中小发表于 2007-11-15 20:42

引用:

原帖由 binghexijian 于 2007-11-15 18:54 发表

IE7也是

的确是啊！

TOP

hansir [楼主]

老韩

银牌会员

帖子: 2753
体力: 2035
威望: 5
当前: 北京丰台区

专长 前端制作,JS,PHP

11^# 大中小发表于 2007-11-16 12:15

引用:

原帖由 piginlove 于 2007-11-15 16:52 发表
如果快速的连续点几下，就会死机了。。

ie6

小调了一下 本来就是有待改善的啊

<!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>
<TITLE>New Document</TITLE>
<style type="text/css">
	#fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(http://www.kuanghong.com/han/images/fours_bj.gif) repeat-x 0 bottom;}
	#f_img_roll{float:left;width:350px; height:300px; position:relative}
	#f_img_roll img{position:absolute; left:0; top:0}
	#f_img_s{float:right; position:relative; width:80px; height:300px;}
	#f_img_s ul{margin:0; padding:0; margin-left:6px; list-style:none;}
	#f_img_s li{width:60px; height:45px;border:1px solid #0066cc;margin-top:3px;}
    #f_img_s img{width:54px; height:39px; border:3px solid #000066;vertical-align:top; }
	#f_img_s div{top:3px}
	#f_mask{position:absolute; top:3px; right:12px; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}
	#f_title{font-size:16px; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
	
  </style>
  <script type="text/javascript">
	 //图片资源
	 var imgs_m=[],imgs_s=[],imgs_title=[];
		imgs_m[0]="http://www.kuanghong.com/han/images/img_1.jpg";
		imgs_m[1]="http://www.kuanghong.com/han/images/img_2.jpg";
		imgs_m[2]="http://www.kuanghong.com/han/images/img_3.jpg";
		imgs_m[3]="http://www.kuanghong.com/han/images/img_4.jpg";
		imgs_m[4]="http://www.kuanghong.com/han/images/img_5.jpg";
		imgs_m[5]="http://www.kuanghong.com/han/images/img_6.jpg";
		imgs_s[0]="http://www.kuanghong.com/han/images/img_1_0.jpg";
		imgs_s[1]="http://www.kuanghong.com/han/images/img_2_0.jpg";
		imgs_s[2]="http://www.kuanghong.com/han/images/img_3_0.jpg";
		imgs_s[3]="http://www.kuanghong.com/han/images/img_4_0.jpg";
		imgs_s[4]="http://www.kuanghong.com/han/images/img_5_0.jpg";
		imgs_s[5]="http://www.kuanghong.com/han/images/img_6_0.jpg";
		
		imgs_title[0]="第一张";
		imgs_title[1]="第二张";
		imgs_title[2]="第三张";
		imgs_title[3]="第四张";
		imgs_title[4]="第五张";
		imgs_title[5]="第六张";
	//显示小图
	function imgs_s_dis(){
		var imgs=document.getElementById("imgs");
		var fr=document.createDocumentFragment();
		for(var i=0;i<imgs_s.length;i++){
			var li=document.createElement("li");
				li.innerHTML="<img src='"+imgs_s[i]+"' alt='' />";
				lis.push(li);
				fr.appendChild(li);
		}
		imgs.appendChild(fr);
	}
	
	//图片切换
	function img_scroll(num){
		cur_img.src=imgs_m[num];
		img_title.innerHTML=imgs_title[num];
	}
	
	//图片切换效果
	 var ie=/MSIE/.test(navigator.userAgent);//浏览器
	 var img_title=null;//title
	 var f_img_roll=null;//大图
	 var cur_img=null;//当前大图
	 var mb_img=null;//目标图
	 var f_mask=null;//MASK层
	 var lis=[];//所有LI
	 var cur_li=null;//当前MASK所在LI
	 var mb_li=null;//目标LI位置
	 var tt=null;//时间函数
	 var m=0;//默认top
	 var r=0;//当前lis下标
	 
	 //自动播放
	 function img_play(){
		r++;
		if(r>lis.length-1)r=0;
		mb_li=lis[r].offsetTop;
		if(tt)clearTimeout(tt);
		tt=setInterval("f_mask_mov()",25);
		cur_li=lis[r];
		img_scroll(r);
		
	 }
	
	 //加载动作
	 function _focus(){
		imgs_s_dis();//初始小图显示
		cur_li=lis[0];//初始当前mask所在元素
		f_img_roll=document.getElementById("f_img_roll");
		cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默认大图引用
		img_title=document.getElementById("f_title");
		f_mask=document.getElementById("f_mask");//得到MASK引用
		for(var i=0;i<lis.length;i++){
			lis[i].onmouseover=function(){
				this.style.border="1px solid #cc0000";
			}
			lis[i].onmouseout=function(){
				this.style.border="1px solid #0066cc";
			}
			lis[i].num=i;
			lis[i].onclick=function(){
				if(cur_li!=this){
					if(tt)clearTimeout(tt);//停止正在的播放
					clearTimeout(ttt);//停止自动播放
					r=this.num;
					mb_li=this.offsetTop;
					tt=setInterval("f_mask_mov()",40);
					cur_li=this;
					img_scroll(this.num);
				}
			}
		}
		ttt=setTimeout("img_play()",3000);//开始自动播放
	 }
	 
	 //滑动效果
	 function f_mask_mov(){
		if(m>mb_li){
			m-=(m-mb_li)*0.2;
			if((m-1)<mb_li){
				clearTimeout(tt);
				f_mask.style.top=mb_li+"px";
				f_mask_top=mb_li;//更新M值
				m=mb_li;
				ttt=setTimeout("img_play()",3000);//开始自动播放
				return;
			}else{
				f_mask.style.top=m+"px";
			}
		}else{
			m+=(mb_li+5-m)*0.2;
			if(m>mb_li){
				clearTimeout(tt);
				f_mask.style.top=mb_li+"px";
				m=f_mask_top=f_mask.offsetTop;//更新M值
				ttt=setTimeout("img_play()",3000);//开始自动播放
				return;
			}else{
				f_mask.style.top=m+"px";
			}
		}
		
	 }
	 window.onload=_focus;
  </script>
</HEAD>
<BODY>
<div id="fours_m">
  <div id="f_img_roll"><img src="http://www.kuanghong.com/han/images/img_1.jpg" /></div>
  <div id="f_img_s">
    <div id="f_mask"></div>
    <ul id="imgs"></ul>
  </div>
  <div id="f_title">第一张</div>
</div>
</BODY>
</HTML>

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

哪些歌曲最流行

TOP

huanglongcn

风过意浓

高级会员

认证
帖子: 805
体力: 988
威望: 0
当前: 广东东莞
离线: 4 天

专长 网页设计,策划,SEO

12^# 大中小发表于 2007-12-26 08:12

嗯,这个效果可以借用一下

我的 i.grosn.com

TOP

sunritz

李杨

版主

认证
帖子: 881
体力: 1761
威望: 2
当前: 湖北武汉
离线: 1 天

专长 网页设计,Flash,前端制作

13^# 大中小发表于 2007-12-26 10:22

不错

Hello,Yang!

TOP

Amicool

阿米酷

银牌会员

帖子: 687
体力: 1527
威望: 0
当前: 浙江杭州
离线: 13 天

专长 网页设计,JS,PHP

14^# 大中小发表于 2007-12-26 12:03

JS的效果和NBA官方的那个Flash效果有的一拼，很不错，好像初始化图片没有预载入，所以第一次主图可能会不动，不过这倒问题不大

集成吊顶

TOP

qqhunter

初级会员

帖子: 64
体力: 105
威望: 0
离线: 220 天

15^# 大中小发表于 2007-12-27 17:39

会挂掉的~~~~

TOP

voodoo5

初级会员

帖子: 78
体力: 170
威望: 0
当前: 福建厦门
离线: 700 天

16^# 大中小发表于 2007-12-28 00:49

如果加入渐变效果就更好了！

TOP

djmin18

新手上路

帖子: 4
体力: 13
威望: 0
离线: 758 天

17^# 大中小发表于 2007-12-28 01:42

测试了还不错，如果那个图片加点效果就爽了哈哈

TOP

holyli

银牌会员

帖子: 453
体力: 1115
威望: 0
离线: 48 天

18^# 大中小发表于 2007-12-28 09:21

测试了还不错，如果那个图片加点效果就爽了哈哈

先天下
www.xiantianxia.cn
www.futuremall.cn

TOP

panpeng23

初级会员

帖子: 35
体力: 57
威望: 0
当前: 湖南长沙
离线: 176 天

专长 网页设计,前端制作

19^# 大中小发表于 2007-12-28 09:36

点拉。。。效果很好哦。

就是好像有点不连贯哦。。

TOP

personlang

初级会员

帖子: 42
体力: 57
威望: 0
当前: 上海浦东
离线: 9 天

20^# 大中小发表于 2008-1-27 21:52

全部兼容，good！收藏了！

TOP

huanglongcn

风过意浓

高级会员

认证
帖子: 805
体力: 988
威望: 0
当前: 广东东莞
离线: 4 天

专长 网页设计,策划,SEO

21^# 大中小发表于 2008-4-1 20:25

这个要收一下

我的 i.grosn.com

TOP

fhjzzx

清馨感觉

中级会员

帖子: 112
体力: 216
威望: 0
离线: 1 天

专长 前端制作,JS,UE

22^# 大中小发表于 2008-4-1 23:29

这个不错，我收藏了，谢谢~~~~~~~~~~~

柯网：www.kelaini.com

TOP

dlhk1989

初级会员

帖子: 76
体力: 142
威望: 0
当前: 辽宁大连
离线: 291 天

23^# 大中小发表于 2008-4-3 10:09

不错啊，收藏收藏

蓝色理想……

TOP

dashzhao

赵勇

银牌会员

帖子: 3265
体力: 1749
威望: 2
当前: 广东深圳

专长媒介

24^# 大中小发表于 2008-4-3 10:18

支持原创最近全是求代码的楼主支持你

一生缘-免费婚恋交友

TOP

gantingyong

新手上路

认证
帖子: 4
体力: 7
威望: 0
当前: 北京朝阳区
离线: 17 天

25^# 大中小发表于 2009-6-27 13:04

图片上怎么加链接啊

TOP

king90

中级会员

帖子: 155
体力: 301
威望: 0
当前: 广东深圳
离线: 107 天

26^# 大中小发表于 2009-6-27 13:22

不错，支持一下！

TOP

plcyxx

新手上路

帖子: 7
体力: 20
威望: 0
当前: 山东济南
离线: 50 天

27^# 大中小发表于 2009-6-27 13:31

等待这个东西好久了，谢谢！

TOP

daocaorenzpp

新手上路

认证
帖子: 1
体力: 7
威望: 0
当前: 北京海淀区
离线: 46 天

28^# 大中小发表于 2009-8-14 15:18

怎么没有连接啊

TOP