【滚轴特效】哲理图文
<P align=center><A href="http://upload.yinhuabbs.cn/up/upload/2016/10/28/1477631813x-1228402496.txt" rel=nofollow target=_blank><SPAN style="FONT-SIZE: 24px"><STRONG><SPAN style="COLOR: #ff0000">全屏欣赏查看源文件代码</SPAN></STRONG> </SPAN></A></P><BR><DIV style="POSITION: relative; WIDTH: 900px; TOP: 20px; LEFT: 0px" class=divBorderStyleRelative twffan="done"><IFRAME height=500 src="http://upload.yinhuabbs.cn/up/upload/2016/10/28/1477631813x-1228402496.txt" frameBorder=0 width=900 marginWidth=0 scrolling=no></IFRAME></DIV>
<DIV align=center><BR><BGSOUND balance=0 volume=-240 loop=infinite src="http://music.163.com/song/media/outer/url?id=268157.mp3"><BR>使用浏览器兼容模式欣赏<BR><BR><BR></DIV>
老可人好！{:1_292:} 我这里什么浏览器模式也看不见，只看见全是代码 学习了，问好老师 学习一下，谢谢。 这个我不会，发这代码就是给学习的吗？哈哈，我笨 代码贴入，圆柱效果未显，仅显示部份如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>代码滚轴特效02</title>
</head>
<body>
<table border="0" cellspacing="30" cellpadding="0" bgcolor="#F8F8f8" style="position: relative; left: 0; top: 0; width: 100%; height: 520px" bordercolor="#F0f0f0">
<tr>
<td>
<!--++++++++++++++++最外层表框，作为定位参照。总容器。+++++++++++++++++++++++++++++++++++-->
<center>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#F8F8f8" style="position: relative; left: 0; top: 0; width: 900px; height: 460px" bordercolor="#F0f0f0">
<tr>
<td style="z-index:100; position: relative; left: 0; top: 0; width: 100px; height: 460px">
<!--++++++++++++++++内层表框，设置为一行三列，放置三个字幕特效对象组。+++++++++++++++++++++++++++++++++++-->
<table style="FILTER: progid:DXImageTransform.Microsoft.blur(pixelradius=5.5, makeshadow='1', ShadowOpacity=0.4); LEFT: -2px; WIDTH: 100px; POSITION: absolute; TOP: 2px; HEIGHT: 460px" cellspacing="0" cellpadding="0" bgcolor="#f0f0f0" border="1">
<tr>
<td></td>
</tr>
</table>
<!--=======================以上为阴影效果的代码。很简单。将表格设置阴影滤镜效果即可。详见滤镜专文。=====================-->
<marquee id="mar1" direction="right" scrollamount="5" scrolldelay="1" style="position: absolute; left: 0px; top: 0px; width: 100px; height: 460px">
<div style="position: relative; left: 0; top: 0; width: 1700px; height: 460px">
<table border="0" cellspacing="0" cellpadding="0" style="position: absolute; left: -600px; top: 0px; width: 2400px; height: 460px">
<tr>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/01.jpg">
</td>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/03.jpg">
</td>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/02.jpg">
</td>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/01.jpg">
</td>
</tr>
</table>
</div></marquee>
<!--===========以上为左圆柱字幕特效。较特殊的是，为配合第二列的字幕效果，这里，将图片左右对称翻转，应用的 FlipH() 滤镜。===========-->
<!--===========将图片设置为表格单元格的背景图，方便精确控制尺寸，以及分别设置翻转滤镜。=================================-->
<!--===========无js不间断字幕特效，详见专文。=================================-->
<table style="position: absolute; left: 0px; top: 0px; width:50px; height:460px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgcolor="#444444">
</td>
</tr>
</table>
<table style="position: absolute; left: 50px; top:0px; width:50px; height:460px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgcolor="#444444">
</td>
</tr>
</table>
<!--++++++这一部分为不透明层。由两个并排的表格实现。左边的在横向上，由全不透明到全透明；右边的反过来，由全透明到全不透明。配合下层的图片，产生圆柱效果。opacity的值按实际效果调整。+++++++++++++++++++++++++++++++++++++++++++++-->
<!--++++++以上为左端滚动圆柱。设置为三层：下层为阴影；中层为滚动图片（字幕效果）；上层为不透明层，产生圆柱效果。+++++++++++++++++++++++++++++++++++++++++++++-->
</td>
<!--+++++++++★★★★★★★★★★★★★★★++++++++++++++++++++++++++++++++++++++++++-->
<td style="z-index: 0; position: relative; left:0px; top: 0px; width: 600px; height: 460px">
<!--++++++++++表格列代码。+++++++++++++++++++++++++++++++++++++++++-->
<marquee id="mar3" direction="left" scrollamount="5" scrolldelay="1" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 460px">
<div style="position: relative; left: 0px; top: 0px; width: 1200px; height: 460px">
<table border="0" cellspacing="0" cellpadding="0" style="position: absolute; left: -800px; top: 0px; width: 3000px; height: 460px">
<tr>
<td style="width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/01.jpg">
</td>
<td style="width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/02.jpg">
</td>
<td style="width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/03.jpg">
</td>
<td style="width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/01.jpg">
</td>
<td style="width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/02.jpg">
</td>
</tr>
</table>
</div></marquee>
<!--===========以上为第二列的字幕效果。可不赘述。=================================-->
<table onmouseover="mar1.stop(), mar2.stop(), mar3.stop()" onmouseout="mar1.start(), mar2.start(), mar3.start()" style="CURSOR: hand; position: absolute; left: 0px; top: 0px; width:600px; height:460px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="FILTER: alpha(opacity=20,finishOpacity=0,style=1); width:80px" bgcolor="#444444">
</td>
<tdstyle="width:520px">
</td>
</tr>
</table>
<!--+++++++++以上为第二列的阴影代码。根据喜好也可不设置。这一部分还控制整个字幕效果的“走”和“停”。由鼠标事件完成。++++++++++++++++++++++++++++++++++++++++++-->
<!--+++++++++以上为第二列的代码。++++++++++++++++++++++++++++++++++++++++++-->
</td>
<!--+++++++++★★★★★★★★★★★★★★★++++++++++++++++++++++++++++++++++++++++++-->
<td style="z-index: 100; position: relative; left: 0px; top: 0px; width: 200px; height: 460px">
<!--++++++++++表格列代码。+++++++++++++++++++++++++++++++++++++++++-->
<table style="FILTER: progid:DXImageTransform.Microsoft.blur(pixelradius=8.5, makeshadow='1', ShadowOpacity=0.4); LEFT: -2px; WIDTH: 200px; POSITION: absolute; TOP: 2px; HEIGHT: 460px" cellspacing="0" cellpadding="0" bgcolor="#f0f0f0" border="1">
<tr>
<td></td>
</tr>
</table>
<!--=========以上为右圆柱阴影效果的代码。参照第一列。可不赘述。=====================-->
<marquee id="mar2" direction="right" scrollamount="5" scrolldelay="1" style="position: absolute; left: 0px; top: 0px; width: 200px; height: 460px">
<div style="position: relative; left: 0px; top: 0px; width: 1600px; height: 460px">
<table border="0" cellspacing="0" cellpadding="0" style="position: absolute; left: -200px; top: 0px; width: 2400px; height: 460px">
<tr>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/02.jpg">
</td>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/01.jpg">
</td>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/03.jpg">
</td>
<td style="filter:FlipH(); width:600px" background="http://webftp.bbs.hnol.net/dysr/html-time/HTML-TIME_study/02.jpg">
</td>
</tr>
</table>
</div></marquee>
<!--===========将图片设置为表格单元格的背景图，方便精确控制尺寸，以及分别设置翻转滤镜。与第一列同。仅数据不同=================================-->
<table style="position: absolute; left: 0px; top: 0px; width:100px; height:460px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgcolor="#444444">
</td>
</tr>
</table>
<table style="position: absolute; left:100px; top:0px; width:100px; height:460px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgcolor="#444444">
</td>
</tr>
</table>
<!--++++++这一部分为不透明层。由两个并排的表格实现。与左边的相同，仅数据不同。配合下层的图片，产生圆柱效果。+++++++++++++++++++++++++++++++++++++++++++++-->
<!--++++++以上为右端滚动圆柱。设置为三层：下层为阴影；中层为滚动图片（字幕效果）；上层为不透明层，产生圆柱效果。与第一列相同，仅数据不同。++++++++++++-->
</td>
</tr>
</table>
</center>
<!--++++++++++++++++内层表框关闭+++++++++++++++++++++++++++++++++++-->
</td>
</tr>
</table>
<!--++++++++++++++++最外层表框关闭+++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++总说明：
１、三个字幕特效需配合适宜，才可产生“仿真”效果（三部分图片的衔接）；
２、先调整第二列的字幕效果，调整图片的相对位置，以“迎合”第一列的字幕特效；
３、再调整第三列的字幕效果，调整图片的相对位置，以“迎合”第二列的字幕特效。
４、这里的对象，基本采用绝对定位，可不设置“层”的迭放，而利用“后写的对象在上层，先写的在下层”这一特性，
来处理对象的迭放先后。
５、三个字幕特效对象，并没有真正的重迭，仅在平面位置上，依次靠在一起。这个制作较麻烦的地方，就在这里。
三部分中，图片的安排次序不相同，以三部分图片“真实”衔接为准。+++++++++++++-->
</body>
</html>
久久. 发表于 2023-7-17 18:44
老可人好！
谢谢问好！ 久久. 发表于 2023-7-17 18:46
我这里什么浏览器模式也看不见，只看见全是代码
使用360浏览器的兼容模式能够欣赏转轴动图的。 容轩听雨 发表于 2023-7-17 20:00
学习了，问好老师
我也是测试代码帖，兼容模式蛮可以，效果不错。
页:
[1]
2