返回列表 发帖
独影孤踪

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
浏阳大围山 

头衔: 知青元老
1楼 跳转到 » 正序看帖
打印
tT
发表于 2011-10-20 08:32 | 只看该作者

上洪秋色














收藏 分享
寸有所长，尺有所短。

独影孤踪

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
浏阳大围山 

头衔: 知青元老
10楼
发表于 2011-10-20 16:15 | 只看该作者

 

      感谢桔橘老师临帖指导，虽然一时还稀里糊涂，我会对照置顶的专文，一步步来，应该可以弄懂吧。

      衷心感谢！

寸有所长，尺有所短。

TOP

枳橘

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
 

头衔: 知青元老
9楼
发表于 2011-10-20 15:53 | 只看该作者

　　再说一点可说可不说的。
　　反转的图片可不另制图，加个翻转或对称滤镜即可。
<td style="filter:flipH(); WIDTH: 1200px" background="http://yh.jisudns.com/userfiles/dengzc/shangh.jpg">

filter:flipH();　　左右翻转
filter:flipV();　　上下翻转
filter:progid:dXImageTransform.Microsoft.BasicImage(mirror=1);　　对称

TOP

枳橘

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
 

头衔: 知青元老
8楼
发表于 2011-10-20 14:21 | 只看该作者

　　制帖代码又改了两处。
　　字幕效果调慢了一点；
　　字幕对象下移了2px（原来的下边有一条白线）。
　　为免音乐打架，此帖取消了背景音乐。


TOP

枳橘

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
 

头衔: 知青元老
7楼
发表于 2011-10-20 13:51 | 只看该作者










　　兄台所提问题的讨论（相关代码详见楼上帖）。
　　１、对象定位的概念；
　　２、无js不间断滚动（字幕效果）。
　　这两个问题，在固顶的汇集帖中（第一部分）都有专文。请兄台再细细看看，以求吃透。

　　《对象定位讨论》
　　http://webftp.bbs.hnol.net/dysr/make/html_all/position.htm

　　《拆解“字幕特效不间断滚动”＿无js》
　　http://webftp.bbs.hnol.net/dysr/html-time/marquee-pic/marquee-pic.htm

　　在此，结合制作，再作一些讨论。也许，专文在表述上有些不到位。

　　一、定位问题
　　我将兄台制作的网页作了调整。
　　最外层为一表格对象，作为所有对象的容器（或叫参照物，专文中比喻为“箱子”），并将底图设置为它的背景图，这样较省事。它在网页中的定位没有位移。
　　第二层为div对象，相对于外层的表格为“绝对定位”，其中“放置”“字幕效果”和两个透明flash对象，都相对于它设置“定位”。这样，div又成了“字幕”和透明flash的“箱子”。
　　
　　兄台所言发帖中的不听话，对象偏向“右下”方，是因为网页对象中，最外层的div设置了移位“left: 10px; top: 15px”（右移10px，下移15px），在以浮动框架“iframe”发帖时，网页中的对象在框架中的起始位置就已经不在“零”点了。而平常用“iframe”发帖时，设置“iframe”的定位，针对的情况不是这样的。

　　二、字幕效果
　　几个关键数据的来源：
　　１、装载图片的表格对象的宽度为所有图片的总和，此例为1200×3=3600 。
　　２、视窗（字幕效果的可见区域）的尺寸，此例宽度为569 。
　　３、图片的容器div的宽度为：有效图片的宽度-视窗宽度，此例为2400-569=1831 。
　　　　“有效图片”是指制作中要求（或说计划）显示的图片内容，此例为一正一反的两张图片。
　　４、整个图片对象（“装”在表格中）相对于“容器div”的位移，此例为-569，也就是视窗的宽度。

　　兄台制作中的不正常，是因为没有加上“需增加”的图片内容。原理可参考一下专文。建议在尝试中，将各对象的数据假设为凑整的数，以方便计算和思考。弄明白了后，无论怎样的情况都不会迷糊。

TOP

独影孤踪

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
浏阳大围山 

头衔: 知青元老
6楼
发表于 2011-10-20 12:35 | 只看该作者

谢谢桔橘老师这么快就帮我修改好了，我已改过。效果很好，平滑移动，毫无跳转，不折服不行。变动之处我再慢慢去琢磨。

寸有所长，尺有所短。

TOP

枳橘

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
 

头衔: 知青元老
5楼
发表于 2011-10-20 11:21 | 只看该作者










<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 5</title>
</head>

<body>

<bgsound src="http://www.dabaoku.com/bjyinyue/mid/4.mid" loop="-1">
<table style="LEFT: 0px; WIDTH: 1000px; position: relative; TOP: 0px; HEIGHT:650px" background="http://yh.jisudns.com/userfiles/dengzc/shanghon.jpg">
<tr>
<td>
<div style="position: absolute; width: 569px; height: 337px; z-index: 1; left:190px; top: 148px">
<marquee onmouseover="this.stop()" style="border:1px solid #000000; LEFT: 1px; WIDTH: 569; CURSOR: hand; position: relative; TOP: 2px; HEIGHT:337" onmouseout="this.start()" scrollamount="2" scrolldelay="1" direction="right">
<div style="LEFT: 0px; WIDTH: 1831px; position: relative; TOP: 0px; HEIGHT:335px">
<table style="LEFT: -569px; WIDTH:3600px; position: absolute; TOP: 0px; HEIGHT: 335px" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="WIDTH: 1200px" background="http://yh.jisudns.com/userfiles/dengzc/shangh.jpg">
</td>
<td style="filter:flipH(); WIDTH: 1200px" background="http://yh.jisudns.com/userfiles/dengzc/shangh.jpg">
</td>
<td style="WIDTH: 1200px" background="http://yh.jisudns.com/userfiles/dengzc/shangh.jpg">
</td>
</tr>
</table>
</div>
</marquee>
<embed style="position: absolute; TOP: 146; LEFT: 118" height="360" type="application/x-shockwave-flash" width="496" src="http://www.fscyd.com/upFiles/tmsc/mnsc2/84.swf" wmode="transparent" quality="high">
<embed style="position: absolute; TOP: 29; LEFT: 16" height="98" type="application/x-shockwave-flash" width="127" src="http://www.zxtx.org/user/yiyi/html/flash/317.swf" wmode="transparent" quality="high">
</div>
</td>
</tr>
</table>

</body>

</html>


++++++++++++++++++++++++++++++ 以上为制帖代码 ++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++ 以下为发帖代码 ++++++++++++

<br><br><br><br><br><br><br><br><br><br>
<iframe style="position: relative; WIDTH: 1000px; height:650px; TOP: 0px; LEFT: -206px" marginheight="0" marginwidth="0" src="http://yh.jisudns.com/userfiles/dengzc/shqs.html" frameborder="0" width="1000" scrolling="no">
</iframe>
　

TOP

枳橘

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
 

头衔: 知青元老
4楼
发表于 2011-10-20 10:11 | 只看该作者

　　入得坛子，欣赏独兄新作，很是慨叹。忍不住要多嘴，虽说是围观的话。
　　整体上灵动（不呆板、不是四平八稳）；
　　浅浅的阴影，产生了立体感，生动；
　　点缀，小人立于视窗前以及位置，又增加了立体感和临场感（如果再加上阴影效果，也许更出味）。
　　美！

　　细细剖析、品味一番再作计较。

TOP

独影孤踪

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
浏阳大围山 

头衔: 知青元老
3楼
发表于 2011-10-20 09:46 | 只看该作者

 

      这个音画的图片移动特效代码是移植了枳橘老师在网页特效介绍过的，移植过程肯定出了什么差错，这里面两张图片实际是同一张，其中有一张是复制后水平反转，按理说首位衔接天衣无缝，不知为什么会有跳转现象，是否因为原来的代码是三张图片，改成两张后不协调？，希望枳橘老师有空时帮我看一下。

     另外我的音画做好发到知青网后，发现图片从窗口向右下偏移出来十多个像素，与窗口不吻合。我反复检查各个环节都没有问题，包括上传空间的都很正常，一发到网上就偏移，折腾好久找不出原因，最后只好用呆办法，将原图反方向出超十多个像素，才让他正好落入窗口。不知是不是与网站有冲突。

寸有所长，尺有所短。

TOP

立秋

Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8Rank: 8

下放地
斗姆湖公社红星大队第2生产队 

头衔: 知青元老
2楼
发表于 2011-10-20 09:11 | 只看该作者
回复 1# 独影孤踪 真好！欣赏了！谢谢！

TOP

返回列表