标题: [习作] 代码相册_硬翻页效果探求 [打印本页]
作者: 枳橘 时间: 2011-4-26 00:32 标题: [习作] 代码相册_硬翻页效果探求
简易代码（含JS）硬翻页相册。该制作为套改练习。
此中图片为横幅，正、反向翻页，完全循环。
如果不强调图片的长宽比，更换其中的图片组链接即可，其他无须更改。
作者: 枳橘 时间: 2011-4-26 00:34
此制作为上帖相册（横幅）改进效果。
图片总数宜为偶数，首尾各加一张补充图片（可视情况处理）。然后将奇、偶数图片分为两组，左边为奇数组图片，右边为偶数组图片。更换图片组即可，其他无须变动。
如果强调图片的长宽比，可调整一下"DHTMLBOOK"类对象的相关数据。
此中图片宜为竖幅，仿书籍效果。在左右两区域点击，可顺序正、反向翻页，至首、尾端停止，不循环。
作者: 枳橘 时间: 2011-4-26 00:50
此两练习，基本情况差不多。第一例为套改，摸索、消化，第二例有所发挥。
第一例适合横幅图片，如风景之类；第二例适合竖幅图片，如书籍式样的情况。
这样，比较方便了。如果网上有现成的链接，就不必重新上传，选一个适合的，更换图片链接即可完成。因制作中含JS，最好还是用网页方式（浮动框架iframe）发帖，以免出现不正常的情况。
两例的基本思路是一样的，相通的。比如竖幅图片，可以将两张拼成一张，成为横幅图片，用第一例制作。当然，这样就需要重新上传了，没懒可偷。
图片附件: 00.jpg (2011-4-26 00:54, 2.08 KB) / 下载次数 10
http://2011.hnzqw.com/attachment.php?aid=51529&k=926377f614772433e1496775a59e0ed7&t=1732598162&sid=3hgPKd
作者: 枳橘 时间: 2011-4-26 03:12
再试一个。
红楼梦连环画。
这个与前两个略有不同，在第二例基础上，稍作调整，将横幅用于竖幅。两个图片组的链接相同（亦可适用半幅图片制作）。
手动正、反顺序翻页，不循环。加翻页计数。
加正、反自动翻页，间隔5秒。设置三按钮，供控制自动状态。
鼠标进入画面停止自动，离开画面恢复自动。
文件内备有注释和说明，供把玩、制作参考。
作者: 独影孤踪 时间: 2011-4-26 06:03
学习并收藏
作者: 好好学习 时间: 2011-4-26 13:02
我的音画知识还没有达到制作的水平，收下来，以后会有用的。不知会不会过期。
作者: 枳橘 时间: 2011-4-26 13:17
回复 5# 独影孤踪
感谢兄台关注、鼓励。
作者: 枳橘 时间: 2011-4-26 13:19
回复 6# 好好学习
感谢赏光。
不着急，慢慢来。
功夫不负有心人，付出了，总会有回报。
过期？将文件下载了，收在电脑里，怎么过期？收藏链接，当然有可能。
作者: 临风独酌 时间: 2011-4-27 11:05
回复 4# 枳橘
图片附件: 谢谢.gif (2011-4-27 11:05, 56.43 KB) / 下载次数 16
http://2011.hnzqw.com/attachment.php?aid=52320&k=abcebe6fec93af385e0405b249521009&t=1732598162&sid=3hgPKd
作者: 枳橘 时间: 2011-4-27 14:53
回复 9# 临风独酌
兄台客气。还礼。
作者: 枳橘 时间: 2011-4-27 14:54
此“代码硬翻页相册”，剖析、把玩，煞是过瘾。 基本摸清了制作思路及处理细节。以井蛙的见识，禁不住感慨叫绝。有如细细品味美文、佳句。
此作的精要就是实现翻页了。大构思于下。
设置两层、左右两部分，四个对象装载图片，叫它们：左上、左下，右上、右下（方便叙述）。
以点击右半区域，实现向左翻页为例（横幅图片），步骤于下。
一、第一步：
１、将左下设置1号图（显示左半部分）；
２、将左上设置2号图（左半部分），将宽度设置为０（当然看不到了）；
３、将右下设置2号图的右半部分（看不到，被右上的内容遮挡了）；
４、将右上设置1号图的右半部分（可见）。
这时看到的是完整的1号图。
二、第二步：
１、开始将右上的1号图（右半部分）逐步变窄。这样，右下的2号图也逐步显示。
２、当右上图至０宽度时，将右上更换为2号图（右半部分），宽度正常。变化极快，又因右下也为2号图，看不出变化。
３、启动第三步骤。
三、第三步：
１、左上的2号图逐步变宽，一直到正常宽度，完全显示。逐步挡住了左下的1号图。
２、设置过程结束信号。
这时，全部过程完成，看到的是完整的2号图。
也就是说，显示的是，左上、右上装载、拼合的2号图。至于左下、右下就暂时不必管它了。
整个变化的细节、设置，处理方式十分精彩，要表述清楚，需费许多笔墨；又，恐土狗子学洋狗子叫，胡乱言代码，遗笑大方，免了。
作者: 枳橘 时间: 2011-6-7 11:22
帖中图片链接引自本站征集图片时的发帖，与成书后的内容不符。只是玩玩，无大碍吧。
幻灯中图片变形，未改变原图状况。若按原图比例制作，又需重新上传，花不来。省了。
作者: 独影孤踪 时间: 2011-6-7 12:48
打开了我们的视野（无论就画册的内容还是对翻页技巧的诠释，同样如此）。谢谢。
作者: 枳橘 时间: 2011-6-7 17:50
打开了我们的视野（无论就画册的内容还是对翻页技巧的诠释，同样如此）。谢谢。 独影孤踪 发表于 2011-6-7 12:48 
谢谢兄台，来了些真格的。看来，有些体会。
话不投机半句多。难得难得。
作者: 白云悠悠 时间: 2011-6-8 09:14
很喜欢14楼的那种翻页效果，给原图增加了很多情趣，实在是好。仔细看看，这么一个看似简洁的帖子，要花费作者多少工夫和精力啊。代码的编排不说，光就是那些图片的地址，也是要输入很久的。感谢作者，佩服作者，你是最棒的。
作者: 枳橘 时间: 2011-6-8 17:57
很喜欢14楼的那种翻页效果，给原图增加了很多情趣，实在是好。仔细看看，这么一个看似简洁的帖子，要花费作者多少工夫和精力啊。代码的编排不说，光就是那些图片的地址，也是要输入很久的。感谢作者，佩服作者，你是最棒的。
白云悠悠 发表于 2011-6-8 09:14
广告语：没有最好，只有更好。
如果“懒”也评个水平，那我倒是可以戴戴这顶帽子。
别看地址多，其实也不费事，当然不是一个个“复制”“粘贴”的办法。这就是懒的水平了，一锅端。
谢谢版主褒奖。
作者: 白云悠悠 时间: 2011-6-8 21:12
广告语：没有最好，只有更好。 如果“懒”也评个水平，那我倒是可以戴戴这顶帽子。 别看地址多， ...
枳橘 发表于 2011-6-8 17:57
“一锅端”是什么方法啊？看来“懒”，是需要一点水平的，不然，“懒”也懒不出名堂来哦。
作者: 枳橘 时间: 2011-6-8 23:00
回复 17# 白云悠悠
俗话说，办法是懒人想出来的。
一锅端，就是一家伙把地址都拿到，然后处理，相对来讲，快点，方便点。
能懒则懒，尽量懒。
三两句话说不清。不说了。
作者: 晓洲 时间: 2011-6-18 09:45
好帖!欣赏!收藏!好好学习!
| 欢迎光临 湖南知青网论坛2011年度 (http://2011.hnzqw.com/) |
Powered by Discuz! 7.2 |