左右不停滚动的图片

人气：　来源：本站原创　作者：佚名　所属栏目：图片类　[切换到繁體中文]

介绍：左右连续滚动，鼠标经过还有脱影的晃动效果。

演示：

<!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><!--body,td{font-size: 12px;}--></style>
<STYLE type=text/css>.fadeleft {
	FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=80, FinishY=0)
}
.faderight {
	FILTER: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0)
}
.blurimg {
	FILTER: Blur(Add=0, Direction=90, Strength=0)
}
.a50 {
	BORDER-RIGHT: #ccccff 2px outset; BORDER-TOP: #ccccff 1px outset; BORDER-LEFT: #ccccff 2px outset; BORDER-BOTTOM: black 0px outset
}
</STYLE>

<SCRIPT>
var movestep=-1;movemount=0;
function moveby(){
	Movediv.style.pixelLeft+=movestep;
	if(movemount++>300) {
		movestep=-movestep;
		movemount=0;
		}
	setTimeout("moveby()",1);
}

var an=0;anstep=2;ht=null;
function blurit(){
BlurImgid.filters.Blur.Strength=an;
an=an+anstep;
if (an>20) {anstep=-anstep}
if (an<0) {anstep=-anstep}
ht=setTimeout("blurit()",1);
}

function hot(iname){
BlurImgid=document.all[iname];
blurit();
}

function clearblur(iname){
clearTimeout(ht);
BlurImgid.filters.Blur.Strength=0;
}

function doOver(){
theObj=window.event.srcElement;
if (theObj.tagName=="IMG") { 
		var iname=theObj.name;
		if(iname!=""&&theObj.className=="blurimg") hot(iname);
		}
}

function doOut(){
theObj=window.event.srcElement;
if (theObj.tagName=="IMG") { 
		var iname=theObj.name;
		if(iname!=""&&theObj.className=="blurimg") clearblur(iname);
		}
}
document.onmouseover=doOver;
document.onmouseout=doOut;
</SCRIPT>
</head>
<body bgcolor="" onload=moveby()>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<DIV class=blurimg id=Layer1 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 150px; OVERFLOW: hidden; BORDER-LEFT: #000000 1px; WIDTH: 467px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 50px; HEIGHT: 100px; BACKGROUND-COLOR: #000000; layer-background-color: #000000">
<DIV id=Movediv 
style="Z-INDEX: 1; WIDTH: 200px; POSITION: absolute; HEIGHT: 100px">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD height=103><A href="#"><IMG 
      class=blurimg height=225 src="http://www.zzsc.org/texiao/zzsc_demo/01.jpg" width=140 border=0 
      name=img1></A></TD>
    <TD height=103><A href="#"><IMG 
      class=blurimg height=225 src="http://www.zzsc.org/texiao/zzsc_demo/02.jpg" width=140 border=0 
      name=img2></A></TD>
    <TD height=103><A href="#"><IMG 
      class=blurimg height=225 src="http://www.zzsc.org/texiao/zzsc_demo/03.jpg" width=140 border=0 
      name=img3></A></TD>
    <TD height=103><A href="#"><IMG 
      class=blurimg height=225 src="http://www.zzsc.org/texiao/zzsc_demo/04.jpg" width=140 border=0 
      name=img4></A></TD>
    <TD height=103><A href="#"><IMG 
      class=blurimg height=225 src="http://www.zzsc.org/texiao/zzsc_demo/05.jpg" width=140 border=0 
      name=img5></A></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=fadeleft id=Layer2 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT:150px; BORDER-LEFT: #000000 1px; WIDTH: 50px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 50px; HEIGHT: 101px; BACKGROUND-COLOR: #000000; layer-background-color: #000000"></DIV>
<DIV class=faderight id=Layer3 
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT:571px; BORDER-LEFT: #000000 1px; WIDTH: 50px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 50px; HEIGHT: 101px; BACKGROUND-COLOR: #000000; layer-background-color: #000000"></DIV>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：onload=moveby()
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<STYLE type=text/css>.fadeleft {
FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=80, FinishY=0)
}
.faderight {
FILTER: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0)
}
.blurimg {
FILTER: Blur(Add=0, Direction=90, Strength=0)
}
.a50 {
BORDER-RIGHT: #ccccff 2px outset; BORDER-TOP: #ccccff 1px outset; BORDER-LEFT: #ccccff 2px outset; BORDER-BOTTOM: black 0px outset
}
</STYLE>

<SCRIPT>
var movestep=-1;movemount=0;
function moveby(){
Movediv.style.pixelLeft+=movestep;
if(movemount++>300) {
  movestep=-movestep;
  movemount=0;
  }
setTimeout("moveby()",1);
}

var an=0;anstep=2;ht=null;
function blurit(){
BlurImgid.filters.Blur.Strength=an;
an=an+anstep;
if (an>20) {anstep=-anstep}
if (an<0) {anstep=-anstep}
ht=setTimeout("blurit()",1);
}

function hot(iname){
BlurImgid=document.all[iname];
blurit();
}

function clearblur(iname){
clearTimeout(ht);
BlurImgid.filters.Blur.Strength=0;
}

function doOver(){
theObj=window.event.srcElement;
if (theObj.tagName=="IMG") {
  var iname=theObj.name;
  if(iname!=""&&theObj.className=="blurimg") hot(iname);
  }
}

function doOut(){
theObj=window.event.srcElement;
if (theObj.tagName=="IMG") {
  var iname=theObj.name;
  if(iname!=""&&theObj.className=="blurimg") clearblur(iname);
  }
}
document.onmouseover=doOver;
document.onmouseout=doOut;
</SCRIPT>