图片的CSS渐变效果
一直都对美工的工作比较感兴趣，最近公司项目需要，顺便网上搜索了个效果。记录一下。
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dv110</title>
<meta name="decorator" content="defaultMain">
<script language="javascript" type="text/javascript">
<!--
function Show_Sub(id_num,num){ //舌签功能
for(var i = 0;i <= 9;i++){
if(GetObj("S_Menu_" + id_num + i)){GetObj("S_Menu_" + id_num + i).className = '';}
if(GetObj("S_Cont_" + id_num + i)){GetObj("S_Cont_" + id_num + i).style.display = 'none';}
}
if(GetObj("S_Menu_" + id_num + num)){GetObj("S_Menu_" + id_num + num).className = 'selectd';}
if(GetObj("S_Cont_" + id_num + num)){GetObj("S_Cont_" + id_num + num).style.display = 'block';}
}
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}
//-->
</script>
</head>
<body>
<table width="1004" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" class="Area501">
<img id="imgLoading0" style="FILTER: revealTrans(duration=1,transition=5)" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10"/>
<img id="imgLoading1" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading2" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading3" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading4" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading5" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
</td>
</tr>
<tr>
<td height="4" colspan="4" valign="top" class="Area502">
<img src="${ctxPath}/images/yellow.jpg" />
</td>
</tr>
<tr>
<td width="268" align="center" valign="top">
</td>
<td width="470" align="center" valign="top">
<div class="header_tg">
<div class="nav_ch">
<div class="first">
<ul>
<li class="l ch_2">
<a id="S_Menu_12" onmouseover="Show_Sub(1,2)"
href="video.do?method=videoView">我的视频</a>
</li>
<li class="l ch_4">
<a id="S_Menu_13" onmouseover="Show_Sub(1,3)" href="${ctxPath}/product/productInfo.html">终端产品</a>
</li>
<li class="l ch_5">
<a id="S_Menu_14" onmouseover="Show_Sub(1,4)" href="${ctxPath}/service/help.html">客服中心</a>
</li>
<li class="l ch_6">
<a id="S_Menu_15" onmouseover="Show_Sub(1,5)" href="display.do?method=display">视频演示</a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td width="266" align="center" valign="top">
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
<!--
var i = 0;
function changingPicture(){
var picOne = document.getElementById("imgLoading" + i);
i = i + 1;
if(i == 6){
i = 0;
}
var picTwo = document.getElementById("imgLoading" + i);
//picTwo.filters.revealTrans.Transition=6;
//alert(Math.floor(Math.random()*20));
picTwo.filters.revealTrans.Transition=12;
picTwo.filters.revealTrans.apply();
picTwo.filters.revealTrans.play();
picTwo.style.display="";
picOne.style.display="none";
setTimeout("changingPicture()",8000);
}
function loadingPicture(){
var pic0=document.getElementById("imgLoading0");
var pic1=document.getElementById("imgLoading1");
var pic2=document.getElementById("imgLoading2");
var pic3=document.getElementById("imgLoading3");
var pic4=document.getElementById("imgLoading4");
var pic5=document.getElementById("imgLoading5");
pic0.src="http://www.dv110.com/capture/capture-" + 0 + ".jpg?" + new Date();
pic1.src="http://www.dv110.com/capture/capture-" + 1 + ".jpg?" + new Date();
pic2.src="http://www.dv110.com/capture/capture-" + 2 + ".jpg?" + new Date();
pic3.src="http://www.dv110.com/capture/capture-" + 3 + ".jpg?" + new Date();
pic4.src="http://www.dv110.com/capture/capture-" + 4 + ".jpg?" + new Date();
pic5.src="http://www.dv110.com/capture/capture-" + 5 + ".jpg?" + new Date();
setTimeout("loadingPicture()",300000);
}
loadingPicture();
changingPicture();
//-->
</script>
</body>
</html>
图形改变总共有24种效果
1： "盒状向外";
2： "圆形收缩";
3： "圆形向内";
4： "从下向上";
5： "从上向下";
6： "从左向右";
7： "从右向左";
8： "百页窗形向右";
9： "百页窗形向下";
10： "棋盘形交叉向右";
11： "棋盘形交叉向下";
12： "随意溶解形";
13： "左右向内";
14： "左右向外";
15： "上下向内";
16： "上下向外";
17： "条纹状向左下";
18： "条纹状向左上";
19： "条纹状向右下";
20： "条纹状向右上";
21： "溶解水平状";
22： "溶解上下状";
23： "随着溶解";
因此，你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dv110</title>
<meta name="decorator" content="defaultMain">
<script language="javascript" type="text/javascript">
<!--
function Show_Sub(id_num,num){ //舌签功能
for(var i = 0;i <= 9;i++){
if(GetObj("S_Menu_" + id_num + i)){GetObj("S_Menu_" + id_num + i).className = '';}
if(GetObj("S_Cont_" + id_num + i)){GetObj("S_Cont_" + id_num + i).style.display = 'none';}
}
if(GetObj("S_Menu_" + id_num + num)){GetObj("S_Menu_" + id_num + num).className = 'selectd';}
if(GetObj("S_Cont_" + id_num + num)){GetObj("S_Cont_" + id_num + num).style.display = 'block';}
}
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}
//-->
</script>
</head>
<body>
<table width="1004" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" class="Area501">
<img id="imgLoading0" style="FILTER: revealTrans(duration=1,transition=5)" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10"/>
<img id="imgLoading1" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading2" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading3" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading4" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading5" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
</td>
</tr>
<tr>
<td height="4" colspan="4" valign="top" class="Area502">
<img src="${ctxPath}/images/yellow.jpg" />
</td>
</tr>
<tr>
<td width="268" align="center" valign="top">
</td>
<td width="470" align="center" valign="top">
<div class="header_tg">
<div class="nav_ch">
<div class="first">
<ul>
<li class="l ch_2">
<a id="S_Menu_12" onmouseover="Show_Sub(1,2)"
href="video.do?method=videoView">我的视频</a>
</li>
<li class="l ch_4">
<a id="S_Menu_13" onmouseover="Show_Sub(1,3)" href="${ctxPath}/product/productInfo.html">终端产品</a>
</li>
<li class="l ch_5">
<a id="S_Menu_14" onmouseover="Show_Sub(1,4)" href="${ctxPath}/service/help.html">客服中心</a>
</li>
<li class="l ch_6">
<a id="S_Menu_15" onmouseover="Show_Sub(1,5)" href="display.do?method=display">视频演示</a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td width="266" align="center" valign="top">
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
<!--
var i = 0;
function changingPicture(){
var picOne = document.getElementById("imgLoading" + i);
i = i + 1;
if(i == 6){
i = 0;
}
var picTwo = document.getElementById("imgLoading" + i);
//picTwo.filters.revealTrans.Transition=6;
//alert(Math.floor(Math.random()*20));
picTwo.filters.revealTrans.Transition=12;
picTwo.filters.revealTrans.apply();
picTwo.filters.revealTrans.play();
picTwo.style.display="";
picOne.style.display="none";
setTimeout("changingPicture()",8000);
}
function loadingPicture(){
var pic0=document.getElementById("imgLoading0");
var pic1=document.getElementById("imgLoading1");
var pic2=document.getElementById("imgLoading2");
var pic3=document.getElementById("imgLoading3");
var pic4=document.getElementById("imgLoading4");
var pic5=document.getElementById("imgLoading5");
pic0.src="http://www.dv110.com/capture/capture-" + 0 + ".jpg?" + new Date();
pic1.src="http://www.dv110.com/capture/capture-" + 1 + ".jpg?" + new Date();
pic2.src="http://www.dv110.com/capture/capture-" + 2 + ".jpg?" + new Date();
pic3.src="http://www.dv110.com/capture/capture-" + 3 + ".jpg?" + new Date();
pic4.src="http://www.dv110.com/capture/capture-" + 4 + ".jpg?" + new Date();
pic5.src="http://www.dv110.com/capture/capture-" + 5 + ".jpg?" + new Date();
setTimeout("loadingPicture()",300000);
}
loadingPicture();
changingPicture();
//-->
</script>
</body>
</html>
图形改变总共有24种效果
1： "盒状向外";
2： "圆形收缩";
3： "圆形向内";
4： "从下向上";
5： "从上向下";
6： "从左向右";
7： "从右向左";
8： "百页窗形向右";
9： "百页窗形向下";
10： "棋盘形交叉向右";
11： "棋盘形交叉向下";
12： "随意溶解形";
13： "左右向内";
14： "左右向外";
15： "上下向内";
16： "上下向外";
17： "条纹状向左下";
18： "条纹状向左上";
19： "条纹状向右下";
20： "条纹状向右上";
21： "溶解水平状";
22： "溶解上下状";
23： "随着溶解";
因此，你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果