北方云app官方下载:如何制作似走马灯反复循环行进的电影胶片图集

来源:百度文库 编辑:高校问答 时间:2024/04/29 17:01:38
经常在网上看到有类似下图这样,从右往左反复循环运动的图集,就像这个新浪网影片介绍页面里的那样: http://ent.sina.com.cn/m/c/f/molihua/ 当鼠标指针移到图片上时,运动就会暂停,而移开后运动又会继续。
http://bbs.flasher.cn/UploadFile/2006-5/2006531110198401.jpg

听说用Flash制作这种效果有两种方法,一是AS;二是直接在主时间轴上做补间。我知道鼠标控制那一部分必须用AS,但这里我想问的是,在主时间轴上似走马灯反复循环行进的电影胶片具体是怎样制作的呢?

我来实现这个问题:
1、index.html代码如下:
<HTML><HEAD><TITLE>无标题文档</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1264" name=GENERATOR>
<link href="css.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
<CENTER>
<TABLE
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
<TD>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="171" background="pic_bg.jpg"><div align="center">1</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">
<p>2</p>
</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">3</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">4</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">5</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">6</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">7</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">8</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">9</div></td>
<td width="171" background="pic_bg.jpg"><div align="center">10</div></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY></HTML>
3、最好加一个CSS固定格式,css.css代码如下:
P {
MARGIN: 20px
}
.table-left-right {
BORDER-LEFT: #E7E7E7 1px solid;
BORDER-RIGHT: #E7E7E7 1px solid;
}
TD {
font-size: 12px;
color: #000000;
}
.hangju {
font-size: 12px;
color: #000000;
line-height: 20px;
word-spacing: 3pt;
}
.title
{
font-size: 14px;
color: #000000;
font-family: "宋体";
font-weight: bold;
}
.title2
{
font-size: 12px;
color: #ffffff;
font-family: "宋体";
font-weight: bold;
}
.title3
{
font-size: 12px;
color: #000000;
font-family: "宋体";
font-weight: bold;
}
a:link {
font-size: 12px;
color: #000000;
text-decoration: underline;
line-height: 12px;
}
a:visited {
font-size: 12px;
color: #000000;
}
a:hover {
font-size: 12px;
color: #000000;
}
a:active {
font-size: 12px;
color: #000000;
}
.INPUT {
BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; FONT-SIZE: 9pt; BORDER-LEFT:#cccccc 1px solid; CURSOR: hand; BORDER-BOTTOM: #cccccc 1px solid;
}

————————————————————————————
我把代码打包放在我的网站上,您去拿吧。
www.esou.com.cn/temp/eg.rar

经常在网上看到有类似下图这样,从右往左反复循环运动的图集,就像这个新浪网影片介绍页面里的那样: http://ent.sina.com.cn/m/c/f/molihua/ 当鼠标指针移到图片上时,运动就会暂停,而移开后运动又会继续。