图片的相册效果

最新推荐文章于 2024-03-01 17:22:45 发布

Sugite

最新推荐文章于 2024-03-01 17:22:45 发布

阅读量862

点赞数

分类专栏： 2-Web 文章标签：相册 javascript function transition bt border

本文链接：https://blog.csdn.net/fuhan520/article/details/6629731

版权

2-Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

功能：该相册会自动翻转，也可以通过设置的按钮实现手工翻转，如跟自己在家翻看相册的效果一样。通过javascript和css滤镜特效使得相册更富动态效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 相册效果 </title>
<script language="javascript">
<!--

	//声明变量
	var imgUrl = new Array();			//图片对象数组
	var imgLink = new Array();			//链接对象数组
	var imgTz = new Array();			//图片说明数组
	var buttonShow = 1;
	var buttonPos = 1;
	var buttonX;
	var buttonY;
	var bakularCode="";
	var adNum =0 ;
	var dakularCode="";
	//-----------------------------------------------------------------------------------
	//初始化数组对象
	imgUrl[1] = "1.jpg";
	imgLink[1] = "#" ;
	imgTz[1] = "说明一";
	imgUrl[2] = "2.jpg";
	imgLink[2] = "#" ;
	imgTz[2] = "说明二";
	imgUrl[3] = "3.jpg";
	imgLink[3] = "#" ;
	imgTz[3] = "说明三";
	imgUrl[4] = "4.jpg";
	imgLink[4] = "#" ;
	imgTz[4] = "说明四";
	imgUrl[5] = "5.jpg";
	imgLink[5] = "#" ;
	imgTz[5] = "说明五";
	//-----------------------------------------------------------------------------------
	//设置数组存储图片以及其链接地址
	var imgPre = new Array();
	for (i=1 ;i<=5 ; i++ )
	{
		imgPre[i] = new Image();
		imgPre[i].src = imgUrl[i];
	}
	//-----------------------------------------------------------------------------------
	//混合转换滤镜
	function setTransition(){
		if(document.all){
			imgUrlrotator.filters.revealTrans.Transition = 23;	//“Transition=23”表示是随机选取转换样式.
			imgUrlrotator.filters.revealTrans.apply();			//应用滤镜
		}
	}
	//-----------------------------------------------------------------------------------
	//实现滤镜转换
	function playTransition(){
		if(document.all)
			imgUrlrotator.filters.revealTrans.play();
	}
	//-----------------------------------------------------------------------------------
	//实现图片转换
	function nextAd(toNum){
		if(adNum < 5)						//遍历数组中的图片
			adNum++;
		else
			adNum=1;
		if(toNum!=null)  adNum=toNum;
		setTransition();	//使用滤镜
		document.images.imgUrlrotator.src = imgUrl[adNum] ;
		document.getElementById('linktext').innerHTML= imgTz[adNum];
		document.images.imgUrlrotator.alt='今日要点：'+imgTz[adNum];
		document.getElementById('linktext').innerHTML="<a href="+imgLink[adNum]+" target=_blank class=px14-lh20>"+imgTz[adNum]+"</a>";
		playTransition();	//实现滤镜转换
		checkButton();
		if(toNum!=null)
		{toNum=null;theTimer=setTimeout("nextAd()",7000);}
		else
		{theTimer=setTimeout("nextAd()",7000);}
	}
	//-----------------------------------------------------------------------------------
	//图片对象的链接地址
	function jump2url(){
		jumpUrl = imgLink[adNum];
		jumpTarget='_blank';
		if(jumpUrl != ''){
			if(jumpTarget != '')
				window.open(jumpUrl,jumpTarget);
			else
				location.href=jumpUrl;
		}
	}
	//-----------------------------------------------------------------------------------
	//设置显示状态信息(鼠标移上去的提示信息)
	function displayStatusMsg(){
		status = imgLink[adNum];
		document.returnValue = true;
	}

	//-----------------------------------------------------------------------------------
	//按钮的单击函数
	function checkButton(){
		for (i=1; i<=imgUrl.length-1 ;i++ ){
			if(i==adNum)
				eval("bt"+i+".style.backgroundColor='#9B0000';bt"+i+".style.color='#ffffff';");
			else
				eval("bt"+i+".style.backgroundColor='#cccccc';bt"+i+".style.color='#000000';");
		}
	}
	//-----------------------------------------------------------------------------------
	//设置按钮对象的位置
	function dakularButtons(){
		if(buttonShow==1){
			switch(buttonPos)
			{
				case 1:{buttonX=280+20-imgUrl.length*20;buttonY=0;break;}
				case 2:{buttonX=280+20-imgUrl.length*20;buttonY=125;break;}
				case 3:{buttonX=imgUrl.length*20-100;buttonY=16;break;}
				case 4:{buttonX=imgUrl.length*20-100;buttonY=125;break;}
				default :{buttonX=280+20-imgUrl.length*20;buttonY=16;break;}
			}
			//按钮对象的样式
			for (i=1;i<=imgUrl.length-1;i++ ){
				dakularCode=dakularCode+"<div id='bt"+i+"' style='display:inline;height=14px;width:50px;border:1px solid #000000;background-color:#f7f7f7;color:#000000; font-size:12px; line-height:14px; filter:Alpha(Opacity=50,FinishOpacity=50,Style=2);' align='center' onMouseOver=this.style.backgroundColor='#ffffff'; this.style.color='#000000' ; this.style.cursor='hand' onMouseOut=checkButton(); onClick='nextAd("+i+");clearTimeout(theTimer);'>"+i+"</div><br/>";
			}
			dakularCode="<div style='display:inline; position:relative; left:"+buttonX+"px; top:"+buttonY+"px; z-index:1;'>"+dakularCode+"</div>";
			document.write(dakularCode);			//在页面中实现按钮
		}
	}
-->
</script>
</head>

<body>
	<table border="0" cellpadding="0" cellspacing="0" id="newsTable" style="position:relative; top:-10px ;right:0px; font-size:12px;">
		<tr>
			<td><script language="javascript">
				dakularButtons();
				</script>
			</td>
			<td>
				<a onMouseOver="displayStatusMsg();return document.returnValue;" onMouseOut="status='';" href="javascript:jump2url()">
					<img style="FILTER:revealTrans(duration=1,transition=18);border:1px solid #000000" src="javascript:nextAd()" width=160 height=150 border=0 name=imgUrlrotator alt="今日新闻"></a>
			</td>
		</tr>
		<tr>
			<td>
			</td>
			<td bgcolor="#f0f0f0" align="center" style="border-bottom:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;" height="20">
			<label id="linktext"></label>
			</td>
		</tr>
	</table>
</body>
</html>

效果图：

Sugite

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
图片的相册效果

功能：该相册会自动翻转，也可以通过设置的按钮实现手工翻转，如跟自己在家翻看相册的效果一样。通过javascript和css滤镜特效使得相册更富动态效果。相册效果 <!-- //声明变量 var imgUrl = new Array(); //图片对象数组 var imgLink = new Array(); //链接对象数组 var imgTz = n
复制链接

扫一扫

专栏目录