清爽简洁的图片交替导航效果
来源：互联网 发布：算法时间复杂度分析 编辑：程序博客网 时间：2024/04/29 01:40
<!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>
img{border:0px}
.chinaz{width:380px;height:60px}
#page_left_1 {WIDTH: 378px; }
#page_left_2 {WIDTH: 380px}
#page_left_2_1 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(p_12_02.jpg); WIDTH: 74px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
#page_left_2_1_1 {FONT-WEIGHT: normal; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_1_2 {FONT-WEIGHT: normal; WIDTH: 74px; COLOR: #ffffff; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_2 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(p_12_04.jpg); WIDTH: 74px; COLOR: #ffffff; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty20 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(p_12_02.jpg); WIDTH: 74px;LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(p_12_05.jpg); WIDTH: 74px; COLOR: #ffffff; LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 #page_left_2_1_1 {BACKGROUND-POSITION: center top; BACKGROUND-IMAGE: url(p_12_03.gif); BACKGROUND-REPEAT: no-repeat}
</style>
</head>
<body>
<DIV align="center" ><br /><br />
<SCRIPT language=javascript>
<!--
var imgUrl=new Array();
var imgLink=new Array();
var label = new Array();
imgUrl[1]="01.jpg";
imgLink[1]="/";
label[1] = "图片一";
imgUrl[2]="02.jpg";
imgLink[2]="/";
label[2] = "图片二";
imgUrl[3]="03.jpg";
imgLink[3]="//";
label[3] = "图片三";
imgUrl[4]="04.jpg";
imgLink[4]="/";
label[4] = "图片四";
imgUrl[5]="02.jpg";
imgLink[5]="/";
label[5] = "图片五";
var num_pic =5;
var label_width = 380/num_pic-2;
var focusPicNumSrc="//";
var time1 = 3; //打开页面等待图片载入的时间
var time2 = 4; //图片轮转间隔时间
var timeout1 = time1*1000;
var timeout2 = time2*1000;
var jumpUrl = '';
var nn=1;//初始焦点
var curFileNum = 1;//传递给myPlayer对象 表示目前焦点序列值
document.write('<style>');
document.write('.focusPic {border:1px #333333 solid; OVERFLOW: hidden; WIDTH: 378px; POSITION: relative; HEIGHT: 213px}');
document.write('.focusPicNum {Z-INDEX: 99; right: 0px; POSITION: absolute; TOP: 190px;MARGIN: 3px}');
document.write('</style>');
if(navigator.appName == "Microsoft Internet Explorer"){
setTimeout('change_img()',timeout1);
}
function change_img(){
if(nn>num_pic) nn=1;
setTimeout('setFocus2('+nn+')',timeout1);
nn++;
tt=setTimeout('change_img()',timeout2);
}
function setFocus2(i){
jumpUrl=imgLink[i];
curFileNum = i;
selectLayer1(i);
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
playTran();
document.images.imgInit.src=imgUrl[i];
}
function setFocus1(i){
nn = i;
ln=i;
curFileNum = i;
selectLayer1(i);
setFocus2(i);
}
function selectLayer1(i){
for (a=1;a<num_pic+1;a++ ){
var obj = GetObj('label_'+a);
obj.className='sty20';
obj.style.width=label_width;
}
var obj = GetObj('label_'+i);
obj.className='sty21';
obj.style.width=label_width;
}
function goUrl(){
ln=nn;
if (ln ==1)if (jumpUrl!='') jumpUrl=imgLink[ln];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function playTran(){
if (document.all)imgInit.filters.revealTrans.play();
}
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else if(document.layers){
return eval("document.layers['" + objName +"']");
}else{
return eval('document.all.' + objName);
}
}
//-->
</SCRIPT>
<DIV class=focusPic id=focusPic>
<SCRIPT language=JavaScript>
<!--
document.write('<DIV class=focusPicNum style=display:none>');
for (i=1;i<num_pic+1;i++ )
{
document.write('<A href=javascript:setFocus1('+i+');><IMG height=15 src='+focusPicNumSrc+'/bn_focus_num_ws_0'+i+'off.gif width=23 border=0 name=fi_'+i+'></A>');
}
document.write('</DIV>');
document.write('<div id="page_left_1">');
document.write('<a id="PicLink" href="javascript:goUrl()"><img src="'+imgUrl[1]+'" width=378 name=imgInit height="213" border="0" style="FILTER: revealTrans(duration=2,transition=6)"></a>');
document.write('</div>');
document.images.imgInit.src=imgUrl[1];
//-->
</SCRIPT>
</DIV>
<DIV class=chinaz>
<SCRIPT language=javascript>
<!--
for(i=1;i<num_pic+1;i++)
document.write('<div class="sty20" style="width:'+label_width+'" id="label_'+i+'" onMouseOver="setFocus1('+i+')"><div id="page_left_2_1_1">'+label[i]+'</div></div>');
-->
</SCRIPT>
<br /><br /><br />
</DIV>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>清爽简洁的图片交替导航效果</title>
<style>
img{border:0px}
.chinaz{width:380px;height:60px}
#page_left_1 {WIDTH: 378px; }
#page_left_2 {WIDTH: 380px}
#page_left_2_1 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(p_12_02.jpg); WIDTH: 74px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
#page_left_2_1_1 {FONT-WEIGHT: normal; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_1_2 {FONT-WEIGHT: normal; WIDTH: 74px; COLOR: #ffffff; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_2 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(p_12_04.jpg); WIDTH: 74px; COLOR: #ffffff; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty20 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(p_12_02.jpg); WIDTH: 74px;LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(p_12_05.jpg); WIDTH: 74px; COLOR: #ffffff; LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 #page_left_2_1_1 {BACKGROUND-POSITION: center top; BACKGROUND-IMAGE: url(p_12_03.gif); BACKGROUND-REPEAT: no-repeat}
</style>
</head>
<body>
<DIV align="center" ><br /><br />
<SCRIPT language=javascript>
<!--
var imgUrl=new Array();
var imgLink=new Array();
var label = new Array();
imgUrl[1]="01.jpg";
imgLink[1]="/";
label[1] = "图片一";
imgUrl[2]="02.jpg";
imgLink[2]="/";
label[2] = "图片二";
imgUrl[3]="03.jpg";
imgLink[3]="//";
label[3] = "图片三";
imgUrl[4]="04.jpg";
imgLink[4]="/";
label[4] = "图片四";
imgUrl[5]="02.jpg";
imgLink[5]="/";
label[5] = "图片五";
var num_pic =5;
var label_width = 380/num_pic-2;
var focusPicNumSrc="//";
var time1 = 3; //打开页面等待图片载入的时间
var time2 = 4; //图片轮转间隔时间
var timeout1 = time1*1000;
var timeout2 = time2*1000;
var jumpUrl = '';
var nn=1;//初始焦点
var curFileNum = 1;//传递给myPlayer对象 表示目前焦点序列值
document.write('<style>');
document.write('.focusPic {border:1px #333333 solid; OVERFLOW: hidden; WIDTH: 378px; POSITION: relative; HEIGHT: 213px}');
document.write('.focusPicNum {Z-INDEX: 99; right: 0px; POSITION: absolute; TOP: 190px;MARGIN: 3px}');
document.write('</style>');
if(navigator.appName == "Microsoft Internet Explorer"){
setTimeout('change_img()',timeout1);
}
function change_img(){
if(nn>num_pic) nn=1;
setTimeout('setFocus2('+nn+')',timeout1);
nn++;
tt=setTimeout('change_img()',timeout2);
}
function setFocus2(i){
jumpUrl=imgLink[i];
curFileNum = i;
selectLayer1(i);
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
playTran();
document.images.imgInit.src=imgUrl[i];
}
function setFocus1(i){
nn = i;
ln=i;
curFileNum = i;
selectLayer1(i);
setFocus2(i);
}
function selectLayer1(i){
for (a=1;a<num_pic+1;a++ ){
var obj = GetObj('label_'+a);
obj.className='sty20';
obj.style.width=label_width;
}
var obj = GetObj('label_'+i);
obj.className='sty21';
obj.style.width=label_width;
}
function goUrl(){
ln=nn;
if (ln ==1)if (jumpUrl!='') jumpUrl=imgLink[ln];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function playTran(){
if (document.all)imgInit.filters.revealTrans.play();
}
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else if(document.layers){
return eval("document.layers['" + objName +"']");
}else{
return eval('document.all.' + objName);
}
}
//-->
</SCRIPT>
<DIV class=focusPic id=focusPic>
<SCRIPT language=JavaScript>
<!--
document.write('<DIV class=focusPicNum style=display:none>');
for (i=1;i<num_pic+1;i++ )
{
document.write('<A href=javascript:setFocus1('+i+');><IMG height=15 src='+focusPicNumSrc+'/bn_focus_num_ws_0'+i+'off.gif width=23 border=0 name=fi_'+i+'></A>');
}
document.write('</DIV>');
document.write('<div id="page_left_1">');
document.write('<a id="PicLink" href="javascript:goUrl()"><img src="'+imgUrl[1]+'" width=378 name=imgInit height="213" border="0" style="FILTER: revealTrans(duration=2,transition=6)"></a>');
document.write('</div>');
document.images.imgInit.src=imgUrl[1];
//-->
</SCRIPT>
</DIV>
<DIV class=chinaz>
<SCRIPT language=javascript>
<!--
for(i=1;i<num_pic+1;i++)
document.write('<div class="sty20" style="width:'+label_width+'" id="label_'+i+'" onMouseOver="setFocus1('+i+')"><div id="page_left_2_1_1">'+label[i]+'</div></div>');
-->
</SCRIPT>
<br /><br /><br />
</DIV>
</body>
</html>
0 0
- 清爽简洁的图片交替导航效果
- 清爽简洁的图片交替导航效果
- 简洁清爽的LaTeX论文模板
- LigerUI初学篇---使用LigerUI制作简洁清爽的界面
- LigerUI初学篇---使用LigerUI制作简洁清爽的界面
- 蓝色大气的交替导航菜单
- 一个WPF的TOOLTIPS的界面效果（清爽）
- 让系统盘“瘦身”的方法－－使你的系统会更加清爽、简洁、高效！
- 简洁清爽全屏自适应Jquery幻灯片
- jquery实现导航栏吸顶效果（简洁版）
- 如何在CSS中实现图片交替效果
- 三种简洁的TAB导航(参考)
- 一款媲美FLASH的图片交替效
- 哥德导航：一个简洁实用的个人网址导航
- 导航效果的实现
- 文字幻灯片交替效果
- jQuery底部带导航的图片切换，定时上下滚动效果（无滚轮切换效果）
- 简洁的python，简洁的urllib,保存图片
- 前后轮翻的JS图片幻灯切换
- 支持向量机SVM算法原理笔记1
- 脚本下运行MySql语句
- 微信企业现金支付 请求失败 unable to use client certificate (no key found or wrong pass phrase?)
- Oracle修改字段相关操作
- 清爽简洁的图片交替导航效果
- Js运动动画系列5--多物体运动-透明度
- 欢迎使用CSDN-markdown编辑器
- 后缀表达式
- RabbitMQ性能测试案例
- 鼠标放到图片上会滑出提示文字
- python下载任意网页图片
- Java enum的用法
- Neo4j安装后的密码修改
